`.
-
-## 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
-
-
-
-
const fruitColors = {
- apple: 'red',
- banana: 'yellow'
-}
-
const fruitColors = {
- apple: 'red',
- banana: 'yellow'
-}
-
-## q
-
-> The HTML `` element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the `` element. - MDN
-
-
-
-
While Marge was fighting the monorail, Homer wondered, Donuts - is there anything they can't do?
-
- While Marge was fighting the monorail, Homer wondered,
- Donuts - is there anything they can't do?
-
-```
-
-
-
-### Usage
-
-
-
-Only use the `` element when you're quoting a person or text. Don't use this element for sarcasm, scare quotes, or similar - simply use quotes as you "normally" would.
-
-### Smart quotes
-
-Outside of `` and ``, browsers do not enable automatic smart quotes (“”). Instead, they rely on content authors to determine which type to use. Since we cannot ensure broad consistency, Odyssey does not apply smart quotes to ``.
-
-
-
-## 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
-
-
-
-
Ramen with white "Paitan" Broth (Limited: 15 servings per day).
-
This dish is now SOLD OUT!
-
Ramen with white "Paitan" Broth (Limited: 15 servings per day).
-This dish is now SOLD OUT!
-```
-
-
-
-## samp
-
-> The HTML Sample Element (``) is used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font (such as Courier or Lucida Console). - MDN
-
-
-
-
When iDonut crashed, it told me Press F5 to refresh bakery .
-
- When iDonut crashed, it told me
- Press F5 to refresh bakery .
-
-```
-
-
-
-## small
-
-> The HTML `` element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from small to x-small. - MDN
-
-
-
-
© 2020 Atko, Inc. All Rights Reserved.
-
© 2020 Atko, Inc. All Rights Reserved.
-```
-
-
-
-## strong
-
-> The HTML Strong Importance Element (``) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type. - MDN
-
-
-
-
- For your safety and the safety of others, please don't run.
-
-
- For your safety and the safety of others, please don't run.
-
-```
-
-
-
-
-
-You can also nest `strong`. Doing so will provide additional style.
-
-
-
-
-
-
- For your safety and the safety of others, please don't run.
-
-
- For your safety and the safety of others,
- please don't run.
-
-```
-
-
-
-## sub
-
-> The HTML Subscript element (``) specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text. - MDN
-
-
-
-
- Penicillin (R-C9 H11 N2 O4 S) was discovered by Alexander Fleming in 1928.
-
-
- Penicillin (R-C9 H11 N2 O4 S) was
- discovered by Alexander Fleming in 1928.
-
-```
-
-
-
-## 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
-
-
-
-
The Pythagorean theorem is often expressed as the following equation:
-
a2 + b2 = c2
-
- The Pythagorean theorem is often expressed as the following equation:
-
-
- a2 + b2 = c2
-
-```
-
-
-
-## var
-
-> The HTML `` element represents the name of a variable in a mathematical expression or a programming context. - MDN
-
-
-
-
Solve for x
-
22 (x +3)+9-5=32
-
Solve for x
-22 (x +3)+9-5=32
-```
-
-
diff --git a/packages/.archived/docs/base/index.md b/packages/.archived/docs/base/index.md
deleted file mode 100644
index 1a9882d5cf..0000000000
--- a/packages/.archived/docs/base/index.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-template: index
-id: base
-title: Base
-lede: Base is the foundation of Odyssey, consisting of Color, Design Tokens, HTML Elements, Iconography and Typography
----
diff --git a/packages/.archived/docs/base/tokens.md b/packages/.archived/docs/base/tokens.md
deleted file mode 100644
index 01bf83304f..0000000000
--- a/packages/.archived/docs/base/tokens.md
+++ /dev/null
@@ -1,215 +0,0 @@
----
-template: plain
-id: base-tokens
-title: Design Tokens
-headline: Design Tokens
-lede: Design Tokens abstract Base elements into names that are commonly understood. They are then used together to build components.
-description: Design Tokens abstract Base elements into names that are commonly understood. They are then used together to build components.
----
-
-
-
- Semantic Colors
-
-
-
-
- Token Name
- Example
- Value
-
-
-
-
- $color-primary-light
Blue 300
-
-
- $color-primary-baseBlue 500
-
-
- $color-primary-darkBlue 900
-
-
- $color-danger-lightRed 300
-
-
- $color-danger-baseRed 500
-
-
- $color-danger-darkRed 900
-
-
-
-
-
-
-
- Focus Ring
-
-
-
-
- Token Name
- Example
- Value
-
-
-
-
- $focus-ring-primaryBlue 300
-
-
- $focus-ring-dangerRed 300
-
-
-
-
-
-
-
- Type
-
-
-
-
- Token Name
- Example
- Value
-
-
-
-
- $text-bodyAa Gray 900
-
-
- $text-dangerAa Red 500
-
-
- $text-headingAa Gray 900
-
-
- $text-subAa Gray 600
-
-
-
-
-
-
-
- Spacing
-
-
-
-
-
- Token Name
-
-
- Example
-
-
- Value
-
-
- Pixels
-
-
-
-
-
-
- $spacing-xl
-
-
-
-
-
-
-
-
-
-
-
- $spacing-l
-
-
-
-
-
-
-
-
-
-
-
- $spacing-m
-
-
-
-
-
-
-
-
-
-
-
- $spacing-s
-
-
-
-
-
-
-
-
-
-
-
- $spacing-xs
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/.archived/docs/base/typography.md b/packages/.archived/docs/base/typography.md
deleted file mode 100644
index c62608fb2d..0000000000
--- a/packages/.archived/docs/base/typography.md
+++ /dev/null
@@ -1,232 +0,0 @@
----
-template: plain
-id: base-type
-title: Typography
-headline: Typography
-lede: A set of pre-defined text styles for headers, body copy, & links designed for clarity in readability and hierarchy.
-description: A set of pre-defined text styles for headers, body copy, & links designed for clarity in readability and hierarchy.
----
-
-## Font family
-
-Odyssey offers separate font stacks for UI, copy, and code:
-
-```scss
-$body-font-family: "Public Sans", "-apple-system", "BlinkMacSystemFont",
- "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue",
- sans-serif;
-
-$mono-font-family: "Inconsolata", "SFMono-Regular", Consolas, "Liberation Mono",
- Menlo, Courier, monospace;
-```
-
-
-
-UI and copy both utilize our `$body-font-family`. This stack prioritizes Public Sans. We fall back to a system font-stack to enable device-standard typography when our preferred families aren't available.
-
-## Hierarchy
-
-
-
-Typographical hierarchy indicates importance of content. Through size and weight, a strong hierarchy can provide clarity to a user to easily understand which level of the content they’re on. Sections need subsections, and those subsections may also need their own subsections. Visually, a user should be able to clearly tell a parent section from a child section simply by the relationship in size and weight between headings.
-
-
-
-## Type styles
-
-
-
-To ensure consistency in typography sizes throughout Okta touchpoints, we’ve created a custom type scale paired with appropriate weights and line-heights.
-
-
-
-### Titles
-
-
-
-Titles are used to describe the main idea of a page, a section, or content that follows it. By default, header tags (`h1` through `h6`) use the corresponding title size.
-
-
-
-
-
-
-
-
-
- Variable
-
-
- rem
-
-
- px
-
-
- Example
-
-
-
-
-
- $size-title-1Waltz, bad nymph, for quick jigs vex!
-
-
- $size-title-2Waltz, bad nymph, for quick jigs vex!
-
-
- $size-title-3Waltz, bad nymph, for quick jigs vex!
-
-
- $size-title-4Waltz, bad nymph, for quick jigs vex!
-
-
- $size-title-5Waltz, bad nymph, for quick jigs vex!
-
-
- $size-title-6Waltz, bad nymph, for quick jigs vex!
-
-
-
-
-
-
-### Body
-
-
-
-Odyssey ships with a base font-size of `16px`. However there are times when different sizes are required.
-
-
-
-
-
-
-
-
-
- Variable
-
-
- rem
-
-
- px
-
-
- Example
-
-
-
-
-
- $size-body-ledeWaltz, bad nymph, for quick jigs vex!
-
-
- $size-body-baseWaltz, bad nymph, for quick jigs vex!
-
-
- $size-body-captionWaltz, bad nymph, for quick jigs vex!
-
-
-
-
-
-
-## Weight
-
-
-
-In order to maintain consistency across browsers and typefaces, we specify weights by their numbered value, not name. Currently, the following weights are available.
-
-
-
-
-
-
-
-
-
- Weight
-
-
- Example
-
-
-
-
-
-
- 400
-
-
- Normal (Book) 400
-
-
-
-
- 600
-
-
- Bold (Medium) 600
-
-
-
-
-
-
-
-## Line length
-
-
-
-For inline and block level content, the line length should be 50 to 75 characters long. In order to facilitate consistency across designs, `max-width: $max-line-length` can be helpful.
-
-
-
-## Heading implementation
-
-
-
-When constructing a component or page, always start with h1 for the topmost level of hierarchy.
-
-Do not rely on heading elements for styling purposes; instead use classes like .page--title to style component headings.
-
-Following these guidelines will ensure a clean document outline, which will increase both SEO performance and accessibility.
-
-
-
-## Further reading
-
-
-
-- "line-height" on MDN
-
-
diff --git a/packages/.archived/docs/beta.md b/packages/.archived/docs/beta.md
deleted file mode 100644
index d8672fa86c..0000000000
--- a/packages/.archived/docs/beta.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-template: plain
-title: Beta
-headline: Beta
-lede: Odyssey is currently in Beta. This can mean different things for different teams, so we’d like to offer some clarity of what it means for the Odyssey Design System.
-description: Odyssey is currently in Beta. This can mean different things for different teams, so we’d like to offer some clarity of what it means for the Odyssey Design System.
----
-
-## What does this mean?
-
-
-
-Designers - the UI Kit and guidelines you are presented with today have been vetted by our team. You should feel safe using them to design features as long as you are comfortable with change. Radical changes may occur, but they will not be implemented without consideration and communication.
-
-Engineers - the @okta/odyssey package will see major changes between now and 1.0. These resources we deliver are ready for early adopters, but breaking changes should be expected. An estimated 1.0 release date is still TBD.
-
-
-
-## Why?
-
-
-
-There are two main reasons we regard Odyssey as a product in Beta.
-
-1. Odyssey has not been tested, end-to-end, on enough platforms. We like to believe our UI is strong enough to support the needs of Okta and our customers, but that belief has not been validated. Indeed, there are known gaps! In this way, the Beta flag is an acknowledgement that we know your needs may not be met yet but we are working hard to get there.
-2. Our foundations are still emerging. Whether it’s visual foundations or technical architecture, the most basic structures of the system are being actively tested and rewritten. You should always expect improvement from Odyssey. Beta is a period where most improvements may introduce breaking changes.
-
-
-
-## Additional questions?
-
-
-
-Don’t hesitate to [reach out](/help).
-
-
diff --git a/packages/.archived/docs/components/banner.md b/packages/.archived/docs/components/banner.md
deleted file mode 100644
index a09618f9c7..0000000000
--- a/packages/.archived/docs/components/banner.md
+++ /dev/null
@@ -1,468 +0,0 @@
----
-template: component
-id: component-banner
-title: Banner
-description: Banners let users know important messages related to their overall experience on the website.
-lede: Banners let users know important messages related to their overall experience on the website. They can be purely informational messages or critical errors to act upon.
-tabs:
- - label: "Overview"
- id: "overview"
- - label: "HTML & SCSS"
- id: "html-scss"
-links:
- - icon: github
- label: View source
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/components/_banner.scss
- - icon: figma
- label: View designs
- href:
----
-
-::: slot overview
-
-## Anatomy
-
-
-
-Banners must be present on load and should not be trigged asynchronously, as they may not be visible. These alerts are not transient, but may be dismissed by the user.
-
-They are best used to indicate global states or errors that effect an entire product.
-
-
-
-## Variants
-
-### Info
-
-
-
-Use Info Banners to surface neutral information or broad announcements to users.
-
-
-
-
-
-
-
-
-
-### Danger
-
-
-
-Use Danger Banners to inform users that a system-wide error has occurred. You may also inform a user when access is about to be lost.
-
-Include guidance to make sure users know what steps to take to address the error or avoid the threat.
-
-
-
-
-
-
-
-
-
-### Caution
-
-
-
-Use Caution Banners to inform users of tasks or processes that may need their attention.
-
-When using the Caution variant, ensure the user does not need more context than you can give in the space available.
-
-
-
-
-
-
-
-
-
-## Usage
-
-
-
-In addition to the required content and placement, Banners have several optional features: Titles, Actions, and Dismissing.
-
-
-
-### Titles
-
-
-
-Banners can utilize an optional Title to give an at-a-glance lede.
-
-
-
-
-
-
-
-
-
-### Actions
-
-
-
-It's often useful to direct users toward an appropriate action, especially for fixing errors.
-
-
-
-
-
-
-
-
-
-
-
-The actions section is limited to links. If it's necessary to provide the user with an action, please direct them to the appropriate flow instead of beginning a new process inline.
-
-
-
-
-
-
-
-
-
-### Dismissal
-
-
-
-Banners support dismissal for messages that do not persist or only require a one-time acknowledgement.
-
-
-
-
-
-
-
-
-
-## Content Guidelines
-
-
-
-Banner content should be succinct and direct. When including an action, be sure the link text clearly indicates where it leads.
-
-
-
-## References
-
-
-
-
-
- Related Components
-
-
- Differences between the available alert components
-
-
- Component
- Available Variants
-
-
- Dynamic
-
-
-
-
-
- Transient
-
-
-
-
-
- Dismissable
-
-
-
-
-
- Actionable
-
-
-
-
-
-
-
- Banner
- Info, Caution, Danger
- No
- No
- Yes
- Yes
-
-
- Infobox Info, Success, Caution, Danger
- Yes
- No
- No
- Yes
-
-
- Toast Info, Success, Caution, Danger
- Yes
- Yes
- Yes
- No
-
-
-
-
-
-
-
-:::
-
-::: slot html-scss
-
-## Info
-
-
-
-
-```html
-
-```
-
-
-
-## Danger
-
-
-
-
-```html
-
-```
-
-
-
-## Caution
-
-
-
-
-```html
-
-```
-
-
-
-## Dismissable
-
-
-
-
-```html
-
-```
-
-
-:::
diff --git a/packages/.archived/docs/components/button.md b/packages/.archived/docs/components/button.md
deleted file mode 100644
index 784c0b1917..0000000000
--- a/packages/.archived/docs/components/button.md
+++ /dev/null
@@ -1,815 +0,0 @@
----
-template: component
-id: component-button
-title: Button
-description: Buttons are used for in-page interactions like form submissions.
-lede: A clickable button used for form submissions and most in-page interactions.
-tabs:
- - label: "Overview"
- id: "overview"
- - label: "HTML & SCSS"
- id: "html-scss"
-links:
- - icon: github
- label: View source
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/components/_button.scss
- - icon: figma
- label: View designs
- href: https://www.figma.com/file/pULYhG6KIhBsnQTFjkpTFv/Buttons?node-id=2660%3A365
----
-
-::: slot overview
-
-## Anatomy
-
-
-
-Visually, a Button is a rounded rectangle with a descriptive caption at its center. Users interact with Buttons via both pointer devices and keystrokes.
-
-
-
-## Variants
-
-
-
-In Odyssey there are five Button variants: Primary, Secondary, Danger, Clear, and Dismiss.
-
-
-
-### Primary
-
-
-
-Use our default Button for primary actions in a view. For example, “Save”.
-
-It's ideal to have one Primary Button per view. However, it's okay to have more than one Primary Button as long that they are equal in priority.
-
-
-
-
-
-
- Launch
-
-
-
-
-### Secondary
-
-
-
-This is ideal for a secondary actions to compliment the Primary Button. Like the Primary Button, use this Button sparingly to provide focus to the user.
-
-
-
-
-
-
- Reschedule launch
-
-
-
-
-### Danger
-
-
-
-Use Danger Buttons for scenarios where a user may be deleting information or making a decision that can not be reversed.
-
-
-
-
-
-
- Jettison oxygen
-
-
-
-
-### Clear
-
-
-
-Use Clear Buttons for interactions that change visible UI but don't submit data. For example, showing a password field or dismissing a modal.
-
-They pair well with Primary and Secondary Buttons.
-
-
-
-
-
-
- Dismiss
-
-
-
-
-### Dismiss
-
-
-
-The Dismiss Button should only be used for dismissing UI. Typically, this Button is included as part of a larger Odyssey component, but may be useful when constructing unique UIs.
-
-The Dismiss Button has unique padding and will inherit the text color of it's parent UI.
-
-
-
-
-
-
-
-
-
-
-
-
-## Sizes
-
-
-
-We offer three sizes of Buttons for use: Small, Medium, and Large. Full-width buttons are also available.
-
-In order to provide a sufficient click area, all Button labels have a minimum width equal to twice the line-height.
-
-
-
-### Small
-
-
-
-Small Buttons are best used for actions within Table rows. Their font-size is descreased while keeping padding proportional to our medium size.
-
-
-
-
-
-
- Near and far planets
-
-
- Information about the nearest and farthest planets.
-
-
-
- Planet
-
-
- Distance (AU)
-
-
- Travel
-
-
-
-
-
- Mars
- 0.52
- Travel
-
- Saturn
- 8.52
- Travel
-
- Neptune
- 29.09
- Travel
-
-
-
-
-
-### Medium
-
-
-
-Our default size, medium Buttons are built for use in most contexts.
-
-
-
-
-
-
- Activate thrusters
-
-
-
-
-### Large
-
-
-
-Large Buttons incease their padding, but not their font size. They're intended for single-interaction UIs like logging in.
-
-
-
-
-
-
- Log in to your console
-
-
-
-
-### Full-width
-
-
-
-Full-width Buttons are intended for single-interaction UIs. These are often widgets like "Sign In" or "Sign Up".
-
-Use this variant when you desire the Button to be full-width regardless of screen size.
-
-
-
-
-
-
- Sign up for Space Camp
-
-
-
-
-## States
-
-
-
-Odyssey provides visual affordances these states: Enabled, Focus, Hover, and Disabled.
-
-
-
-### Enabled
-
-
-
-Buttons in their "normal" state are considered enabled. They are ready for user interaction.
-
-
-
-
-
-
- Launch
-
-
-
-
-### Focus
-
-
-
-The focus state is a visual affordance that the user has highlighted the Button with a pointer, keyboard, or voice.
-
-
-
-
-
-
- Launch
-
-
-
-
-### Hover
-
-
-
-Hover states are activated when the user pauses their pointer over the Button.
-
-
-
-
-
-
- Launch
-
-
-
-
-### Disabled
-
-
-
-Disabled Buttons are unavailable for interaction and cannot be focused. They can be used when an action is unavailable, possibly due to incomplete information or access restrictions.
-
-You should pair Disabled Buttons with a Tooltip if the user would benefit from additional context.
-
-
-
-
-
-
-
- Launch
-
-
-
-
-
-
-## Usage
-
-
-
-Use Buttons to indicate the in-page actions a user can take.
-
-
-
-
-
- Dock shuttle
-
-
-
-
-
-Don't use Buttons to navigate users around the site or product; use links instead.
-
-
-
-
-
- Visit space FAQ
-
-
-
-## Content Guidelines
-
-
-
-Consider the following when writing content for Buttons. By doing so, it will ensure users can easily navigate the page and complete the task at hand efficiently.
-
-
-
-### Context
-
-
-
-Provide enough context to ensure the user is aware what the interaction will achieve. Avoid patterns that require the user to discover what a Button does.
-
-
-
-
-
-
- Initiate docking
-
-
-
-
-
-
-Be strategic in your Button placement so a user has the best context. For example, consider using Buttons at the end of a form or preceding them with supporting copy.
-
-
-
-
-
-
- Go
-
-
-
-
-### Word count
-
-
-
-Don't use more than three words inside of a Button. If a user needs more context, consider other design solutions.
-
-
-
-
-
-
- Initiate docking
-
-
-
-
-
-
-
- Initiate standard docking procedure
-
-
-
-
-### Capitalization
-
-
-
-When using multiple words, use sentence case. Capitalize only the first letter and any proper nouns.
-
-
-
-
-
-
- Initiate docking
-
-
-
-
-
-
-
- Initiate Docking
-
-
-
-
-### Buttons with Icons
-
-
-
-Icons can be added to any of our Button variants to increase clarity or add flair. Icons will be laid out automatically based on language direction.
-
-
-
-
-
-
- Configure console
-
-
-
-
-#### Icon-only usability
-
-
-
-We recommend pairing icon-only Buttons with our Tooltip. While this is not required, it will increase clarity for sighted users.
-
-
-
-
-
-
-
-
-
-
-
-
-
-## Accessibility
-
-
-
-Color is not a clear affordance for all users, please use clear, concise copy to label Buttons. Good rules of thumb: use three or less words to describe your action and start your label with a verb (e.g. "Access report" vs "Report PDF").
-
-
-
-## References
-
-### Related components
-
-
-
-- Link
-- Tooltip
-
-
-
-### Further reading
-
-
-
-- Button - MDN
-- Accessibile Icon Buttons - Sara Soueidan
-
-
-
-:::
-
-::: slot html-scss
-
-## Primary
-
-
-
-
- Primary
-
-
- Hover
-
-
- Focus
-
-
- Disabled
-
-
-
-```html
-
- Primary
-
-
- Primary
-
-```
-
-
-
-## Secondary
-
-
-
-
- Default
-
-
- Hover
-
-
- Focus
-
-
- Disabled
-
-
-
-```html
-
- Default
-
-
- Default
-
-```
-
-
-
-## Danger
-
-
-
-
- Danger
-
-
- Hover
-
-
- Focus
-
-
- Disabled
-
-
-
-```html
-
- Danger
-
-
- Danger
-
-```
-
-
-
-## Dismiss
-
-
-
-
- Dismiss
-
-
- Hover
-
-
- Focus
-
-
- Disabled
-
-
-
-```html
-
- Dismiss
-
-
- Dismiss
-
-```
-
-
-
-## Clear
-
-
-
-
- Clear
-
-
- Hover
-
-
- Focus
-
-
- Disabled
-
-
-
-```html
-
- Clear
-
-
- Clear
-
-```
-
-
-
-## Size: Small
-
-
-
-
- Primary
-
-
- Hover
-
-
- Focus
-
-
- Disabled
-
-
-
-```html
-
- Primary
-
-
- Primary
-
-```
-
-
-
-## Size: Medium
-
-
-
-
- Primary
-
-
- Hover
-
-
- Focus
-
-
- Disabled
-
-
-
-```html
-
- Primary
-
-
- Primary
-
-```
-
-
-
-## Size: Large
-
-
-
-
- Primary
-
-
- Hover
-
-
- Focus
-
-
- Disabled
-
-
-
-```html
-
- Primary
-
-
- Primary
-
-```
-
-
-
-## Full-width
-
-
-
-
- Sign up for Space Camp
-
-
-
-```html
-
- Sign up for Space Camp
-
-```
-
-
-
-## Icon Buttons
-
-
-
-When using icons within a button, be sure to add `focusable="false"` to the SVG; this will prevent browsers (IE, specifically) from incorrectly focusing on the icon instead of the button. Similarly, the `[role="presentation"]` attribute on the icon SVG will ensure screen readers do not unnecessarily announce iconography.
-
-
-
-### Icon with label
-
-
-
-
- Button label
-
-
-
-```html
-
-
- ...
- Button label
-
-
-```
-
-
-
-### Icon-only
-
-
-
-If your button does not have a visual label, be sure to apply the `u-visually-hidden` utility class to ensure screen readers can provide the necessary context to a user. Additionally, the use of the `presentation` role on the icon SVG enables decorative icons to be ignored by screen readers without compromising the accessibility of informative icons.
-
-
-
-
-
-
- Button label
-
-
-
-```html
-
-
- ...
- Button label
-
-
-```
-
-
-
-## Accessibility
-
-
-
-In addition to the above use-cases for Icon, consider using the `` element instead of `` whenever possible. The keyboard and screen reader interaction for these elements is different. Space will trigger a ``; Enter will trigger an ``.
-
-
-:::
diff --git a/packages/.archived/docs/components/checkbox.md b/packages/.archived/docs/components/checkbox.md
deleted file mode 100644
index d1408a19c9..0000000000
--- a/packages/.archived/docs/components/checkbox.md
+++ /dev/null
@@ -1,457 +0,0 @@
----
-template: component
-id: component-checkbox
-title: Checkbox
-description: Checkboxes appear as a square shaped UI accompanied by a caption.
-lede: Checkboxes appear as a square shaped UI accompanied by a caption. Checkboxes can be found in tables, forms, or in and around text inputs.
-tabs:
- - label: "Overview"
- id: "overview"
- - label: "HTML & SCSS"
- id: "html-scss"
-links:
- - icon: github
- label: View source
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/components/_checkbox.scss
- - icon: figma
- label: View designs
- href: https://www.figma.com/file/tVkWsXwnWICeguWhzX6Vwl/Inputs?node-id=476%3A3490
----
-
-::: slot overview
-
-## Anatomy
-
-
-
-Users can click a Checkbox to make a choice and click it again to deselect an option. They allow users to select one or more options of something.
-
-
-
-
-
-
- Payload includes
- Tungsten rods
- Oxygen filters
- Liquid fuel
- Replacement crew
-
-
-
-
-## States
-
-
-
-Checkboxes support several states: enabled, hover, focus, disabled, invalid, required, and indeterminate.
-
-
-
-### Enabled
-
-
-
-Checkboxes in their "unchecked" state are considered enabled. They are ready for user interaction.
-
-
-
-
-
- Enable auto-docking
-
-
-
-### Hover
-
-
-
-Hover states are activated when the user pauses their pointer over the input.
-
-
-
-
-
- Enable auto-docking
-
-
-
-### Focus
-
-
-
-The focus state is a visual affordance that the user has highlighted the input with a pointer, keyboard, or voice.
-
-
-
-
-
- Enable auto-docking
-
-
-
-### Checked
-
-
-
-Checked Checkboxes, sometimes referred to as "ticked", display a check to indicate the they are selected.
-
-
-
-
-
- Enable auto-docking
-
-
-
-### Disabled
-
-
-
-Disabled inputs are unavailable for interaction and cannot be focused. They can be used when input is disallowed, possibly due to a system state or access restrictions.
-
-Checkboxes are disabled individually. The values of disabled inputs will not be submitted.
-
-
-
-
-
- Enable auto-docking
- Enable auto-docking
- Enable auto-docking
- Enable auto-docking
-
-
-
-### Invalid
-
-
-
-Checkboxes present as invalid when a required input is left unchecked or an incompatible choice has been made.
-
-When indicating a validation error, please use a Field Error label to indicate the nature of the error. Color alone is not an accessible way to signify that something has gone wrong.
-
-Unlike Radio Buttons, Checkboxes validate individually, not as a group.
-
-
-
-
-
- Undocking Procedure
- Cycle airlock
- Disengage maglock
- Open the pod bay doors
-
- Error: I'm afraid I can't do that, Dave.
-
-
-
-
-### Required
-
-
-
-Unlike other inputs, Odyssey assumes Checkboxes are optional by default.
-
-Individual checkboxes can be set to required. This is useful when a user confirms they have read the terms of service.
-
-
-
-
-
- I understand the risks of space travel.
-
-
-
-### Indeterminate
-
-
-
-In the case of nested checkboxes, an indeterminate state may be required.
-
-Note that this state is visual-only and will be submitted as either "checked" or "unchecked" depending on the design of your UI.
-
-
-
-
-
-
- Hangar 18 inventory
-
-
-
-
-
-
-
-:::
-
-::: slot html-scss
-
-## Basic example
-
-
-
-
- Field legend label
- Label 1
- Label 2
- Label 3
-
-
-
-```html
-
- Field legend label
- Label 1
- Label 2
- Label 3
-
-```
-
-
-
-### Checkbox Inline
-
-
-
-
- Inline label
-
-
-
-```html
-
- Inline label
-
-```
-
-
-
-### Checkbox State: Disabled
-
-
-
-
- Field legend label
- Label 1
- Label 2
- Label 3
- Label 4
-
-
-
-```html
-
- Field legend label
- Label 1
- Label 2
- Label 3
- Label 4
-
-```
-
-
-
-### Checkbox State: Error
-
-
-
-
-```html
-
- Field legend label
- Label 1
- Label 2
- Label 3
-
- Invalid error description
-
-
-```
-
-
-
-:::
diff --git a/packages/.archived/docs/components/field-labels.md b/packages/.archived/docs/components/field-labels.md
deleted file mode 100644
index c9e7af6008..0000000000
--- a/packages/.archived/docs/components/field-labels.md
+++ /dev/null
@@ -1,313 +0,0 @@
----
-template: component
-id: component-field-labels
-title: Field Labels
-description: These captions help make forms more accessible.
-lede: These captions help make forms more accessible by providing context to the user. They can be used with all Odyssey inputs.
-tabs:
- - label: "Overview"
- id: "overview"
- - label: "HTML & SCSS"
- id: "html-scss"
-links:
- - icon: github
- label: View source
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/components/_label.scss
----
-
-::: slot overview
-
-## Anatomy
-
-
-
-Field labels provide textual affordances and context for Odyssey's various inputs. Our UI Kit provides these labels alongside each component.
-
-Please refer to individual components for complete documentation. These examples are provided for quick illustration.
-
-
-
-### Label
-
-
-
-Labels caption pieces of UI, typically form fields. They are required for all inputs. When related to sets of Radios or Checkboxes, they may also be referred to as "legends".
-
-Keep labels to a word or two so users can quickly scan the form. Always use sentence casing.
-
-
-
-
-
-
-
-### Field hint
-
-
-
-Use field hints to provide context, formatting help, or other guidelines to the user. Do not use the placeholder attribute for these purposes.
-
-Limit hints to a short sentence. If additional context is required, it should be provided outside the Field.
-
-
-
-
-
- Select speed
-
- None of these are achievable... yet.
-
- Lightspeed
- Warp Speed
- Ludicrous Speed
-
-
-
-### Error messages
-
-
-
-Invalid fields should include an inline message to explain the error.
-
-If possible, describe how the error may be resolved.
-
-
-
-
-
- I understand the risks of space travel.
- You must acknowledge the dangers before proceeding.
-
-
-
-### Optional fields
-
-
-
-Odyssey assumes inputs are required by default. Optional labels should be used to indicate when data is not required for the user to complete a task.
-
-
-
-
-
-
-
- Proxima Centauri
- Barnard's Star
- WISE 1049-5319
- Wolf 359
- Lalande 21185
- Sirius A
- Sirius B
-
- Destination star Optional
-
-
-
-
-:::
-
-::: slot html-scss
-
-## Usage
-
-
-
-Please refer to individual components for complete documentation. These examples are provided for quick illustration.
-
-
-
-### Label
-
-
-
-
-
- Field label
-
-
-
-
- Field label
-
-
-```
-
-
-
-### Field hint
-
-
-
-
-```html
-
- Field label
-
- Label 1
- Label 2
- Label 3
-
-```
-
-
-
-### Error messages
-
-
-
-
-```html
-
- Field legend label
- Label 1
- Label 2
- Label 3
-
- Error: Invalid error description
-
-
-```
-
-
-
-### Optional fields
-
-
-
-
-
-
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- Option 6
-
- Field label Optional
-
-
-
-
-
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- Option 6
-
- Field label Optional
-
-
-```
-
-
diff --git a/packages/.archived/docs/components/fpo.svg b/packages/.archived/docs/components/fpo.svg
deleted file mode 100644
index 8e525136a1..0000000000
--- a/packages/.archived/docs/components/fpo.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
diff --git a/packages/.archived/docs/components/index.md b/packages/.archived/docs/components/index.md
deleted file mode 100644
index 4524a36c04..0000000000
--- a/packages/.archived/docs/components/index.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-template: index
-id: components
-title: Components
-lede: Components are commonly found, pre-assembled UI Objects built from Odyssey's Base and organized by form and function.
----
diff --git a/packages/.archived/docs/components/infobox.md b/packages/.archived/docs/components/infobox.md
deleted file mode 100644
index 2170b8294c..0000000000
--- a/packages/.archived/docs/components/infobox.md
+++ /dev/null
@@ -1,594 +0,0 @@
----
-template: component
-id: component-infobox
-title: Infobox
-description: An infobox is a type of alert that provides feedback in response to a user action or system activity.
-lede: An infobox is a type of alert that provides feedback in response to a user action or system activity.
-tabs:
- - label: "Overview"
- id: "overview"
- - label: "HTML & SCSS"
- id: "html-scss"
-links:
- - icon: github
- label: View source
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/components/_infobox.scss
- - icon: figma
- label: View designs
- href:
----
-
-::: slot overview
-
-## Anatomy
-
-
-
-This component may be present on load or triggered by different types of events, but they are not transient or dismissable.
-
-
-
-## Variants
-
-### Info
-
-
-
-Use Infoboxes for communicating important guidance to the user. When using the Info variant, consider if plain copy will suffice on the page itself first. Reserve this component for "can’t miss" instructions.
-
-
-
-
-
-
-
-
-
-### Danger
-
-
-
-Use Danger Infoboxes to inform users that an error has occurred. You may also inform a user when specific processes are particularly destructive.
-
-Include guidance to make sure users know what steps to take to address the error or avoid data loss.
-
-
-
-
-
-
-
-
-
-### Caution
-
-
-
-Use Caution Infoboxes to inform users of tasks or processes that need their attention.
-
-When using the Caution variant, ensure the user does not need more context than you can give in the space available.
-
-
-
-
-
-
-
-
-
-### Success
-
-
-
-Use Success Infoboxes for reporting successful actions, processes, or states to the user.
-
-
-
-
-
-
-
-
-
-## Usage
-
-
-
-Infoboxes can be present when the page loads or appear dynamically. For instance, a Form may include a Caution message if the user should be aware of particular requirements up front. Alternately, the Danger variant may be used on Form submission to surface an error.
-
-Avoid overusing Infobox within the same view. They are intended to draw the eye, and multiple visible Infoboxes may overwhelm users.
-
-
-
-### Actions
-
-
-
-It is ideal to direct users toward an appropriate action, especially for addressing errors. Infoboxes allow for both inline and separated actions. To preserve clarity, limit Infoboxes to one link.
-
-
-
-
-
-
-
-
-
-
-
-The actions section is limited to links. If it's necessary to provide the user with an action, please direct them to the appropriate flow instead of beginning a new process inline.
-
-
-
-
-
-
-
-
-
-### Placement
-
-
-
-Infoboxes should be displayed above the content they apply to but not higher than their scope.
-
-For example, a Form error should be displayed above all Fieldsets, but below the Form title.
-
-
-
-
-
-
-
-
-
-
-
-Stay away from nesting Infoboxes within information-dense UI like Tables. If you need to convey something about an individual data point, consider another design solution.
-
-
-
-
-
-
-
-
-
-
- Planet
-
-
- Radius (km)
-
-
- Type
-
-
-
-
-
- Jupiter
- 69,911
- Gas giant
-
-
-
- Pluto
-
-
- 6,371
- Terrestrial
-
-
- Mercury
- 1,737
- Terrestrial
-
-
-
-
-
-
-
-## Content Guidelines
-
-
-
-These messages may be used for longer content than Toast or Banner, but shouldn't go beyond two paragraphs. When including an inline link or action, be sure the link text clearly indicates where it leads.
-
-Do not include images or other UIs within Infobox.
-
-
-
-
-
-
-
-
-
-### Content Areas
-
-
-
-Both Title and Content are optional, but at least one of them is required.
-
-
-
-## Accessibility
-
-
-
-When deploying Infoboxes, two `role`s may apply. Danger variants should utilize the `alert` role, as their contents represent immediate risk or failure. Success and Caution variants are better suited to the `status` role, which provides a less urgent announcement on appearance. The Info variant does not require a `role`, as it represents plain content.
-
-
-
-## References
-
-
-
-
-
- Related Components
-
-
- Differences between the available alert components
-
-
- Component
- Available Variants
-
-
- Dynamic
-
-
-
-
-
- Transient
-
-
-
-
-
- Dismissable
-
-
-
-
-
- Actionable
-
-
-
-
-
-
-
- Banner Info, Caution, Danger
- No
- No
- Yes
- Yes
-
-
- Infobox
- Info, Success, Caution, Danger
- Yes
- No
- No
- Yes
-
-
- Toast Info, Success, Caution, Danger
- Yes
- Yes
- Yes
- No
-
-
-
-
-
-
-
-:::
-
-::: slot html-scss
-
-## Info
-
-
-
-
-```html
-
-```
-
-
-
-## Danger
-
-
-
-
-```html
-
-```
-
-
-
-## Caution
-
-
-
-
-```html
-
-```
-
-
-
-## Success
-
-
-
-
-```html
-
-```
-
-
-
-## Inline Actions
-
-
-
-
-```html
-
-```
-
-
-
-## Block Actions
-
-
-
-
-```html
-
-```
-
-
-
-:::
diff --git a/packages/.archived/docs/components/link.md b/packages/.archived/docs/components/link.md
deleted file mode 100644
index 7478b0bc18..0000000000
--- a/packages/.archived/docs/components/link.md
+++ /dev/null
@@ -1,174 +0,0 @@
----
-template: component
-id: component-link
-title: Link
-description: Links are navigation elements displayed as text.
-lede: Links are navigation elements displayed as text. Use a Link to bring a user to another page or start a download.
-tabs:
- - label: "Overview"
- id: "overview"
- - label: "HTML & SCSS"
- id: "html-scss"
-links:
- - icon: github
- label: View source
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/base/_typography-link.scss
- - icon: figma
- label: View designs
- href: https://www.figma.com/file/JW50oK4VDmN6M8cQcx5dPh6g/Typography?node-id=4124%3A15
----
-
-::: slot overview
-
-## Anatomy
-
-
-
-External links open in a separate tab and are identified by the
-
-
-
- https://en.wikipedia.org/wiki/Cosmic_latte
-
-
-
-## States
-
-### Visited Links
-
-Odyssey disables special styling for visited links. This is an intentional compromise that preferences user security and ease of maintenance.
-
-## Usage
-
-
-
-Links may be used within content or as standalone UI. When using links within content - like a paragraph or list item - do not pair them with Icons.
-
-Avoid using Links for actions, preferring Buttons instead.
-
-
-
-## Content guidelines
-
-
-
-Choose Link copy that describes the destination (e.g. "Settings"), rather than generic text (e.g. "Click here" or a URL). Aim to keep this copy concise, three words at most.
-
-Keep in mind that all users may not have the same visual context due to their device or other constraints.
-
-
-
-
-
- View solar system
-
-
-
-
-
- View system
-
-
-
-
-
- View all local stellar orbiters
-
-
-
-### Icons
-
-
-
-Icons may be included in standalone links. They are not supported within paragraph content or longer copy.
-
-Icon layout is automatic, based on language direction.
-
-
-
-
-
-
-
-
-### Mailto
-
-
-
-If you need a direct email link, display the whole address (e.g. lauren.ipsum@okta.com).
-
-Avoid colloquial text that hides the associated email (e.g. "Contact Us").
-
-
-
-
-
- odysseus@okta.com
-
-
-
-### Accessibility
-
-
-
-Links in Odyssey are not underlined. They maintain a minimum 3:1 contrast ratio with our body text colors and a 4.5:1 ratio with our available background colors. If you deviate from these standards via overrides, ensure that your links have a non-color indicator like an underline.
-
-Links should display a visible affordance when users interact via keyboard. Odyssey preserves the default `:focus` state for each browser.
-
-
-
-## References
-
-### Further reading
-
-- [Google's Developer Documentation](https://developers.google.com/web/tools/lighthouse/audits/noopener) provides backgrounds on security and performance considerations when using external links
-
-:::
-
-::: slot html-scss
-
-## Basic example
-
-
-
-
-```html
-lauren.ipsum@okta.com
-```
-
-
-
-## External link
-
-
-
-
-```html
-Okta.com
-```
-
-
-
-## Visited Links
-
-Odyssey has removed unique styling for `:visited` links. This is an intentional compromise that preferences user security and ease of maintenance over the `:visited` affordance.
-
-:::
diff --git a/packages/.archived/docs/components/modal.md b/packages/.archived/docs/components/modal.md
deleted file mode 100644
index 993ba4fd32..0000000000
--- a/packages/.archived/docs/components/modal.md
+++ /dev/null
@@ -1,237 +0,0 @@
----
-template: component
-id: component-modal
-description: UI that appears on top of the main content and moves the system into a mode requiring user interaction.
-lede: UI that appears on top of the main content and moves the system into a mode requiring user interaction. This dialog disables the main content until the user interacts with the modal dialog.
-title: Modal
-tabs:
- - label: "Overview"
- id: "overview"
- - label: "HTML & SCSS"
- id: "html-scss"
-links:
- - icon: github
- label: View source
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/components/_modal.scss
- - icon: figma
- label: View designs
- href: https://www.figma.com/file/qqAGCkxl8lfUJKNGsgdoUG/Modal
----
-
-::: slot overview
-
-## Anatomy
-
-
-
-Modals are inserted above the main content as a blocking mechanism to ask for user input or confirm an action. They disable all other contexts until the user interacts with the modal itself.
-
-
-
-
-
-Launch modal
-
-
-
-### Arrival
-
-
-
-How modals arrive on the screen is as important as the content they contain. Animation does more than provide a pleasing experience. It contextualizes the new UI the user is being presented.
-
-
-
-### Dismissing
-
-
-
-Users may close modals by clicking on the button in the upper, ending corner of the container. They may also click anywhere outside of the container, within the "curtain".
-
-
-
-### Autofocus
-
-
-
-Focus is placed on the first item a user can select, allowing them to immediately exit or submit the modal when possible. Focus is limited to the scope of the dialog while the modal is open.
-
-
-
-## Usage
-
-
-
-The default modal allows users to interact with and alter the experience it is currently interrupting. Modals interrupt a user’s experience. This may be bothersome, and modals should be used with discretion. If a modal is becoming complicated or claustrophobic, another solution may be needed.
-
-
-
-### Use when...
-
-
-
-- Blocking user interaction for security reasons - e.g. "Please reenter your password to initiate launch."
-- Gathering immediate information to continue a task - e.g. "A hangar number is required to continue."
-- Confirming user interaction during destructive actions - e.g. "Please confirm the starship name to begin disassembly."
-- Offering an alternative that would lessen the user's required effort - e.g. "Additional security clearance will be required - are you sure you want to continue?"
-
-
-
-### Don't use when...
-
-
-
-- Immediate action is not required
-- The dialog would interrupt a workflow
-- Additional context may be required or helpful
-- The dialog content is long-form
-- The user has not triggered the modal via interaction (e.g. on page load)
-- There is already a modal being displayed
-
-
-
-## Content guidelines
-
-
-
-Context is key. There needs to be a direct connection between the trigger (i.e. a button or link) and the modal that follows. Repeating the trigger's copy within the modal can help reinforce this connection. Providing a sense of connection between the trigger and modal is important to ensure a consistent user experience.
-
-
-
-## Accessibility
-
-### Accessible behavior
-
-
-
-When a user opens a modal, interaction is limited to the new context. While this may seem expected, it can surprise users. This is heightened for users requiring assistive technologies.
-
-For convenience, users can exit the modal in a few ways:
-
-- Clicking on the overlay
-
-- Hitting esc
-
-- Clicking or navigating to any element tagged with `data-micromodal-close`
-
-For users happy with their new context, we ensure their attention isn't misdirected. Scrolling on the main content becomes locked, and we inform the browser to lock the `tabindex` to the modal context. This way, regardless of input method, a user's interactions are limited to their new scope.
-
-
-
-## Further reading
-
-- [How To Make Modal Windows Better For Everyone](https://www.smashingmagazine.com/2014/09/making-modal-windows-better-for-everyone/) - Scott O'Hara (2014)
-- [Making Modal Windows Better For Everyone, again...](https://www.scottohara.me/blog/2016/09/07/revised-modal-window.html) - Scott O'Hara (2016)
-- [Modal & Nonmodal Dialogs: When (& When Not) to Use Them](https://www.nngroup.com/articles/modal-nonmodal-dialog/) - Therese Fessenden, Nielsen Norman Group (2017)
-- [Micromodal.js](https://micromodal.now.sh/) - JS Documentation
-
-
-
-
-
-
-
-
- Please confirm that Launchpad DS-21A is cleared of personnel and debris to proceed with countdown.
-
-
-
-
-
-
-
-
-
-
-
- This is the modal content area. It's width is determined based on the amount of content within it.
-
-
-
-
-
-
-
-
-
- Modal content
-
-
-
-
-
-
-### Accessible attributes
-
-
-
-The modal components makes use of several ARIA attributes in order to give assistive technologies (AT) as much information as possible.
-
-- `aria-hidden` - This indicates whether or not the modal is visible and should be automatically set to `true` or `false` by our companion Javascript.
-- `role="dialog"` - Until the `role` element is widely supported, this attribute indicates the semantic status of the modal to the browser. Please use `"alertdialog"` instead if your modal represents a dangerous action or error.
-- `aria-modal="true"` - This indicates that the rest of the workflow is stopped while this element is present.
-- `aria-labelledby="ods-modal--title-id"` - This attribute informs ATs which other element can be treated as the label for this dialog. Please use the unique `id` associated with the dialog's title.
-- `aria-label="Close"` - Please use this tag on any `button` that allows the user to exit the dialog. By default, this is included on the modal's exit button.
-
-
-:::
diff --git a/packages/.archived/docs/components/radio-button.md b/packages/.archived/docs/components/radio-button.md
deleted file mode 100644
index ab9d0c6588..0000000000
--- a/packages/.archived/docs/components/radio-button.md
+++ /dev/null
@@ -1,350 +0,0 @@
----
-template: component
-id: component-radio-button
-title: Radio Button
-description: Radios appear as a ring shaped UI accompanied by a caption that allows the user to choose only one option at a time.
-lede: Radios appear as a ring shaped UI accompanied by a caption that allows the user to choose only one option at a time.
-tabs:
- - label: "Overview"
- id: "overview"
- - label: "HTML & SCSS"
- id: "html-scss"
-links:
- - icon: github
- label: View source
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/components/_radio-button.scss
- - icon: figma
- label: View designs
- href: https://www.figma.com/file/tVkWsXwnWICeguWhzX6Vwl/Inputs?node-id=476%3A4173
----
-
-::: slot overview
-
-## Anatomy
-
-
-
-Radio Buttons allow users to select one option from a set. Users can click a Radio to make a choice; selecting another will deselect the last.
-
-
-
-
-
- Select speed
- Lightspeed
- Warp Speed
- Ludicrous Speed
-
-
-
-## States
-
-
-
-There are fives Checkbox states: enabled, hover, focus, disabled, invalid, and optional.
-
-
-
-### Enabled
-
-
-
-Radio Buttons in their "unchecked" state are considered enabled. They are ready for user interaction.
-
-
-
-
-
- Warp speed
-
-
-
-### Hover
-
-
-
-Hover states are activated when the user pauses their pointer over the input.
-
-
-
-
-
- Warp speed
-
-
-
-### Focus
-
-
-
-The focus state is a visual affordance that the user has highlighted the input with a pointer, keyboard, or voice.
-
-
-
-
-
- Warp speed
-
-
-
-### Checked
-
-
-
-Checked Radios display a blue fill to indicate the they are selected.
-
-
-
-
-
- Warp speed
-
-
-
-### Disabled
-
-
-
-Disabled inputs are unavailable for interaction and cannot be focused. They can be used when input is disallowed, possibly due to a system state or access restrictions.
-
-Radios are disabled by option.
-
-
-
-
-
- Warp speed
- Warp speed
- Warp speed
- Warp speed
-
-
-
-### Optional
-
-
-
-Odyssey assumes inputs are required by default. Optional inputs should be used to indicate when data is not required for the user to complete a task.
-
-
-
-
-
- Select speed Optional
- Lightspeed
- Warp Speed
- Ludicrous Speed
-
-
-
-### Invalid
-
-
-
-Radios present as invalid when a required input is left unchecked or an incompatible choice has been made.
-
-When indicating a validation error, please use a Field Error label to indicate the nature of the error. Color alone is not an accessible way to signify that something has gone wrong.
-
-Unlike Checkboxes, Radios validate as a group, not individually.
-
-
-
-
-
- Select speed
- Lightspeed
- Warp Speed
- Ludicrous Speed
- Error: General relativity forbids it.
-
-
-:::
-
-::: slot html-scss
-
-## Basic example
-
-
-
-
- Field label
- Label 1
- Label 2
- Label 3
-
-
-
-```html
-
- Field label
- Label 1
- Label 2
- Label 3
-
-```
-
-
-
-## radio State: Disabled
-
-
-
-
- Field label
- Label 1
- Label 2
- Label 3
-
-
-
-```html
-
- Field label
- Label 1
- Label 2
- Label 3
-
-```
-
-
-
-## radio State: Error
-
-
-
-
-```html
-
- Field label
- Label 1
- Label 2
- Label 3
-
- Error: This is an invalid selection.
-
-
-```
-
-
-
-:::
diff --git a/packages/.archived/docs/components/select.md b/packages/.archived/docs/components/select.md
deleted file mode 100644
index a9ecd139a6..0000000000
--- a/packages/.archived/docs/components/select.md
+++ /dev/null
@@ -1,632 +0,0 @@
----
-template: component
-id: component-select
-title: Select
-description: Often referred to as a “dropdown menu” this input triggers a menu of options a user can select.
-lede: Often referred to as a “dropdown menu” this input triggers a menu of options a user can select. Country and state Selects are common examples.
-tabs:
- - label: "Overview"
- id: "overview"
- - label: "HTML & SCSS"
- id: "html-scss"
-links:
- - icon: github
- label: View source
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/components/_select.scss
- - icon: figma
- label: View designs
- href: https://www.figma.com/file/tVkWsXwnWICeguWhzX6Vwl/Inputs?node-id=476%3A3423
----
-
-::: slot overview
-
-## Anatomy
-
-
-
-Interacting with a Select displays a list of values to choose from. Choosing a value will override any previous selection and close the Select.
-
-Odyssey also supports a Multi-Select variant that allows users to select many values.
-
-To support expected functionality and behaviors, Select relies on the Choices.js library. Odyssey provides fallback styling when Choices.js isn't available.
-
-
-
-
-
-
-
- Proxima Centauri
- Barnard's Star
- WISE 1049-5319
- Wolf 359
- Lalande 21185
- Sirius A
- Sirius B
-
- Destination star
-
-
-
-
-## Variants
-
-
-
-Odyssey provides support for both single and multi-value Selects.
-
-
-
-### Single Select
-
-
-
-The default Select allows users to choose a single value from a list of options. Selecting another option will replace the first.
-
-
-
-
-
-
-
- Proxima Centauri
- Barnard's Star
- WISE 1049-5319
- Wolf 359
- Lalande 21185
- Sirius A
- Sirius B
-
- Destination star
-
-
-
-
-### Multi-Select
-
-
-
-The Multi-Select variant allows users to choose more than one value from the list of options.
-
-
-
-
-
-
-
- Proxima Centauri
- Barnard's Star
- WISE 1049-5319
- Wolf 359
- Lalande 21185
- Sirius A
- Sirius B
-
- Destination star(s)
-
-
-
-
-## States
-
-
-
-Select inputs support the following states: enabled, hover, focus, disabled, optional, and invalid.
-
-
-
-### Enabled
-
-
-
-Select inputs in their "normal" state are considered enabled. They are ready for user interaction.
-
-
-
-
-
-
-
- Proxima Centauri
- Barnard's Star
- WISE 1049-5319
- Wolf 359
- Lalande 21185
- Sirius A
- Sirius B
-
- Destination star
-
-
-
-
-### Hover
-
-
-
-Hover states are activated when the user pauses their pointer over the input.
-
-
-
-
-
-
-
- Proxima Centauri
- Barnard's Star
- WISE 1049-5319
- Wolf 359
- Lalande 21185
- Sirius A
- Sirius B
-
- Destination star
-
-
-
-
-### Focus
-
-
-
-The focus state is a visual affordance that the user has highlighted the input with a pointer, keyboard, or voice.
-
-
-
-
-
-
-
- Proxima Centauri
- Barnard's Star
- WISE 1049-5319
- Wolf 359
- Lalande 21185
- Sirius A
- Sirius B
-
- Destination star
-
-
-
-
-### Disabled
-
-
-
-Disabled inputs are unavailable for interaction and cannot be focused. They can be used when input is disallowed, possibly due to a system state or access restrictions.
-
-The values of disabled inputs will not be submitted.
-
-
-
-
-
-
-
- Proxima Centauri
- Barnard's Star
- WISE 1049-5319
- Wolf 359
- Lalande 21185
- Sirius A
- Sirius B
-
- Destination star
-
-
-
-
-### Optional
-
-
-
-Odyssey assumes inputs are required by default. Optional inputs should be used to indicate when data is not required for the user to complete a task.
-
-
-
-
-
-
-
- Proxima Centauri
- Barnard's Star
- WISE 1049-5319
- Wolf 359
- Lalande 21185
- Sirius A
- Sirius B
-
- Destination star Optional
-
-
-
-
-### Invalid
-
-
-
-The invalid state is for inputs with incorrect values or values of the wrong format.
-
-When indicating a validation error, please use a Field Error label to indicate the nature of the error. Color alone is not an accessible way to signify that something has gone wrong.
-
-
-
-
-
-
-
- Proxima Centauri
- Barnard's Star
- WISE 1049-5319
- Wolf 359
- Lalande 21185
- Sirius A
- Sirius B
-
-
Destination star
-
- Error: This does not appear to be a valid stellar object.
-
-
-
-
-## Usage
-
-
-
-Selects are most useful when users are choosing between 7-15 options. For smaller sets, Radio Buttons are more effective. For larger sets, a Text Input with autocompletion may be a better fit.
-
-Selects perform better when the options are familiar to the user. If a user may be unfamiliar with their options or need to compare them, use Radio Buttons.
-
-Select inputs should not have a default selected unless a majority of users will be choosing it.
-
-
-
-
-
-
-
-
- Proxima Centauri
- Alpha Centauri A
- Alpha Centauri B
-
- Barnard's Star
- WISE 1049-5319
- Wolf 359
- Lalande 21185
-
- Sirius A
- Sirius B
-
-
- Destination star
-
-
-
-
-### Option groups
-
-
-
-Options may be grouped within the Select list to help guide users. When doing this, consider that Choices will ignore any ungrouped items.
-
-
-
-## References
-
-### Further Reading
-
-- Choices.js documentation
-
-:::
-
-::: slot html-scss
-
-## Basic example
-
-
-
-
-
-
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- Option 6
-
- Field label
-
-
-
-
-
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- Option 6
-
- Field label
-
-
-```
-
-
-
-## Multi-Select example
-
-
-
-
-
-
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- Option 6
-
- Field label
-
-
-
-
-
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- Option 6
-
- Field label
-
-
-```
-
-
-
-## Option groups example
-
-
-
-
-
-
-
- Option 1
- Option 2
- Option 3
-
-
- Option 1
- Option 2
-
-
- Field label
-
-
-
-
-
-
- Option 1
- Option 2
- Option 3
-
-
- Option 1
- Option 2
-
-
- Field label
-
-
-```
-
-
-
-## States
-
-### Disabled
-
-
-
-
-
-
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- Option 6
-
- Field label
-
-
-
-
-
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- Option 6
-
- Field label
-
-
-```
-
-
-
-### Optional
-
-
-
-
-
-
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- Option 6
-
- Field label Optional
-
-
-
-
-
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- Option 6
-
- Field label Optional
-
-
-```
-
-
-
-### Invalid
-
-
-
-Because of the current inability to ensure consistent validation behavior across browsers, we're using the `.is-ods-select-invalid` class to indicate this state.
-
-
-
-
-
-
-
-
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- Option 6
-
-
Field label
-
- Error: Invalid error description
-
-
-
-
-
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- Option 6
-
-
Field label
-
- Error: Invalid error description
-
-
-```
-
-
-
-:::
diff --git a/packages/.archived/docs/components/status.md b/packages/.archived/docs/components/status.md
deleted file mode 100644
index bd0db78567..0000000000
--- a/packages/.archived/docs/components/status.md
+++ /dev/null
@@ -1,317 +0,0 @@
----
-template: component
-id: component-status
-title: Status
-description: Status is used to inform users by providing feedback on system states.
-lede: Status is used to inform users by providing feedback on system states. Status can display broad operational states as well as granular states like user status.
-tabs:
- - label: "Overview"
- id: "overview"
- - label: "HTML & SCSS"
- id: "html-scss"
-links:
- - icon: github
- label: View source
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/components/_status.scss
- - icon: figma
- label: View designs
- href: https://www.figma.com/file/rBPRx3GCZ1DHNmFCwZNJ8f/Status?node-id=25%3A2
----
-
-::: slot overview
-
-## Anatomy
-
-
-
-Status is not an interactive element. It is only intended to inform. If a Status indicates that a user should take action, be sure to provide the appropriate controls.
-
-
-
-## Variants
-
-
-
-There are four variants of Status available: Neutral, Success, Caution, and Danger.
-
-
-
-### Neutral
-
-
-
-Neutral Statuses are gray and should be used to indicate states like "Paused", "Not started", or "Queued".
-
-This is the default variant.
-
-
-
-
-
-
- Propulsion systems
-
-
- Engines offline
-
-
-
-
-### Success
-
-
-
-Success Statuses are green and should be used to indicate states like "Complete", "Active", or "Service operational".
-
-
-
-
-
-
- Propulsion systems
-
-
- Online
-
-
-
-
-### Caution
-
-
-
-Caution Statuses are yellow and should be used to indicate states like "Attention suggested" or "Service degradation".
-
-
-
-
-
-
- Propulsion systems
-
-
- Check engine
-
-
-
-
-### Danger
-
-
-
-Danger Statuses are red and should be used to indicate states like "Error", "Failure", or "Service disruption".
-
-
-
-
-
-
- Propulsion systems
-
-
- Warp core disruption
-
-
-
-
-## Usage
-
-
-
-Use Status to communicate the state of a discrete item, such as a server or individual process. Both labeled and unlabeled variants are acceptable, but should follow the associated guidelines.
-
-
-
-
-
-
- Engine performance
-
-
- Nominal
-
-
-
-
-### Within Table
-
-
-
-Table supports Status as a content type. Status requires a distinct column and should not be mixed with other content types.
-
-In this case the column heading acts as the Status label.
-
-
-
-## Content guidelines
-
-
-
-Statuses content should provide a quick overview. Limit Status descriptor and label text to three words or less. Use sentence casing for both.
-
-
-
-
-
-
- Warp drive status
-
-
- Engaged
-
-
-
-
-### Statuses without labels
-
-
-
-Where necessary, labels may be hidden. If a label is not present, ensure the Status copy communicates appropriate context. Even if the label is hidden, it must be populated to ensure context for users of assistive technology.
-
-
-
-
-
-
- Warp drive status
-
-
- Warp drive engaged
-
-
-
-
-:::
-
-::: slot html-scss
-
-## Variants
-
-### Neutral
-
-
-
-
-
- Status label
-
-
- Neutral descriptor
-
-
-
- Status label
- Neutral descriptor
-
-```
-
-
-
-### Success
-
-
-
-
-
- Status label
-
-
- Success descriptor
-
-
-
- Status label
- Success descriptor
-
-```
-
-
-
-### Caution
-
-
-
-
-
- Status label
-
-
- Caution descriptor
-
-
-
- Status label
- Caution descriptor
-
-```
-
-
-
-### Danger
-
-
-
-
-
- Status label
-
-
- Danger descriptor
-
-
-
- Status label
- Danger descriptor
-
-```
-
-
-
-## Hiding labels
-
-
-
-Labels may be hidden by applying the `.is-ods-status-label-hidden` class.
-
-Even if the label is hidden, it must be populated to ensure appropriate context for users of assistive technology.
-
-
-
-
-
-
-
- Status label
-
-
- Status descriptor
-
-
-
- Status label
- Status descriptor
-
-```
-
-
-
-:::
diff --git a/packages/.archived/docs/components/tab.md b/packages/.archived/docs/components/tab.md
deleted file mode 100644
index a7b73d6b43..0000000000
--- a/packages/.archived/docs/components/tab.md
+++ /dev/null
@@ -1,362 +0,0 @@
----
-template: component
-id: component-tab
-title: Tab
-description: Tabs are a navigational component used to organize content by grouping similar information on the same page.
-lede: Navigation component used to organize content by grouping similar information on the same page. They allow content to be viewed without having to navigate away from that page or route.
-tabs:
- - label: "Overview"
- id: "overview"
- - label: "HTML & SCSS"
- id: "html-scss"
-links:
- - icon: github
- label: View source
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/components/_tab.scss
- - icon: figma
- label: View designs
- href: https://www.figma.com/file/fz2Agv32E0RNaJ5cKVUe2i/Tab?node-id=519%3A0
----
-
-::: slot overview
-
-## Anatomy
-
-
-
-Users interact with Tab as they would a button, the main difference is the outcome. By default, the first tab is active and the associated content displayed in the tab panel. Upon selecting a different tab, the tab indicator appears on the selected tab. The tab panel will then update to show the new content.
-
-Additionally, the tab element is keyboard-navigable (See [Accessibility: Keyboard Support](#keyboard-support))
-
-
-
-
-
- Terrestrial Planets
- Terrestrial planets are planets that are composed primarily of silicate rocks or metals.
-
-
-
- Mercury is the smallest and innermost planet in the Solar System. Its orbit around the Sun takes 87.97 Earth days, the shortest of all the planets in the Solar System.
-
-
-
-
- Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty. As the second-brightest natural object in the night sky after the Moon, Venus can cast shadows and can be, on rare occasion, visible to the naked eye in broad daylight.
-
-
-
-
- Earth is the third planet from the Sun and the only astronomical object known to harbor life. About 29% of Earth's surface is land consisting of continents and islands.
-
-
-
-
- Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System, being larger than only Mercury. In English, Mars carries the name of the Roman god of war and is often referred to as the "Red Planet".
-
-
-
-
-
-
-## Usage
-
-
-
-Tabs were created to shorten long pages. Before you use these, we’d recommend laying
-out all of the content on your page out first. From there, figure out common themes and
-see what could be grouped together. Those themes should become your Tabs.
-
-
-
-### Relate to the page title
-
-
-
-Tabs are not navigation. Meaning they don’t take you from place to place. Rather, they are meant for context switching related to the page.
-
-
-
-
- Terrestrial Planets
- Terrestrial planets are planets that are composed primarily of silicate rocks or metals.
-
-
-
- Terrestrial Planets
- Terrestrial planets are planets that are composed primarily of silicate rocks or metals.
-
-
-### Position above major content
-
-
-
-Tabs are best used at the top of the page or situated above the content it’s related to. This will help establish hierarchy.
-
-
-
-
- Missions
- There have been 49 missions involving various types of spacecraft.
-
-
-
-
-
- Missions
- There have been 8 missions involving orbiters.
-
-
- Missions
- There have been 12 missions involving atmospheric vehicles.
-
-
- Missions
- There have been 4 missions involving lander vehicles.
-
-
-
-
-### Don't stack tabs
-
-
-
-Use Tab sparingly. Limit the Tab component to one per page, and refrain from including a second set of Tabs within a tabpanel.
-
-
-
-
-
-
-## Content Guidelines
-
-
-
-- Refrain from using tabs without tabpanels.
-- Don't have more than 8 tabs in a tablist.
-- Don't add an icon to a tab. Icons should be reserved for very specific things. It can be hard to maintain consistency with use of icons as it pertains to their semantic meanings and meaning to Okta.
-
-
-
-## Accessibility
-
-### Keyboard Support
-
-
-
-
-
- When implementing this component you should consider the following keyboard behaviors.
-
-
- Key
- Behavior
-
-
-
-
- Tab When focus moves in to tablist the focus is placed on the first tab element.
-
-
- Unlike the right arrow key, if you tab past the last element, the tab focus continues down the page as normal. In this case, it should set focus in to the active tabpanel
-
-
- Enter Space When focus is placed on a tab, the corresponding tabpanel is activated/displayed.
-
-
- Right Arrow When focus is within the tablist the next tab is selected.
-
-
- If the last tab is focused the focus is moved to the first tab.
-
-
- Left Arrow When focus is within the tablist the previous tab is selected.
-
-
- If the first tab is focused the focus is moved to the last tab.
-
-
- Home If a tab has focus, the focus is moved to the first tab.
-
-
- End If a tab has focus, the focus is moved to the last tab.
-
-
-
-
-
-
-
-## References
-
-### Further Reading
-
-- [Tabs Design Pattern in WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel)
-
-:::
-
-::: slot html-scss
-
-## Basic example
-
-
-
-
-
- Tabpanel 1 content…
-
-
- Tabpanel 2 content…
-
-
- Tabpanel 3 content…
-
-
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
-
-
-
-## Switching tabs
-
-
-
-The JS included in the `@okta/odyssey` package is for demo purposes only. For those implementing the Tab component from scratch, be sure to implement the behavior as follows:
-
-1. Set the select tab button's aria-selected attribute to true. If a different tab was previously selected, that tab button's aria-selected attribute must be set to false.
-2. The tabpanel corresponding to the tab button is shown. This is done by removing the hidden attribute on the tabpanel. If a different tabpanel was previously visible, the hidden attribute is applied to it.
-
-
-
-:::
-
-
diff --git a/packages/.archived/docs/components/table.md b/packages/.archived/docs/components/table.md
deleted file mode 100644
index 06707c20c3..0000000000
--- a/packages/.archived/docs/components/table.md
+++ /dev/null
@@ -1,1050 +0,0 @@
----
-template: component
-id: component-table
-title: Table
-description: Tables provide structure for displaying sets of data across rows and columns.
-lede: Tables provide structure for displaying sets of data across rows and columns. They support multiple content types and some internal actions.
-tabs:
- - label: "Overview"
- id: "overview"
- - label: "HTML & SCSS"
- id: "html-scss"
-links:
- - icon: github
- label: View source
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/components/_table.scss
- - icon: figma
- label: View designs
- href: https://www.figma.com/file/Utu5kj6tW2JK0emuWsQfFK/Table?node-id=25%3A2
----
-
-::: slot overview
-
-## Anatomy
-
-
-
-Sorting Table columns is a common interaction for users. Following standard conventions will ensure a consistent experience:
-
-Any sortable column should display the appropriate icon for its state: ascending, descending, or unsorted.
-
-When an unsorted heading is clicked, the column should sort in ascending (A to Z) order.
-
-When an ascending heading is clicked, it should swap to descending (Z to A) order.
-
-Finally, when a descending heading is clicked, it should swap to unsorted.
-
-When any column becomes sorted, the previously active column should return to an unsorted state.
-
-
-
-
-
-
- Big and small planets
-
-
- Information about the largest and smallest planets.
-
-
-
- Planet
-
-
- Radius (km)
-
-
- Type
-
-
-
-
-
- Jupiter
- 69,911
- Gas giant
-
-
- Earth
- 6,371
- Terrestrial
-
-
- Mercury
- 1,737
- Terrestrial
-
-
-
-
-
-
-## States
-
-### Empty tables
-
-
-
-If no data is returned - whether due to filtering or an empty data set - be sure to provide a null state for your users. If you can detect why no data was returned, make that clear in the tfoot.
-The data-null attribute will ensure the table styling is adjusted.
-
-
-
-
-
-
- Big and small planets
-
-
- Information about the largest and smallest planets.
-
-
- Planet
- Radius (km)
- Type
-
-
-
-
-
-
-
- Aw beans. This set of filters didn't return any results.
-
-
-
-
-
-
-
-## Usage
-
-
-
-Note that tables should not have a fixed width, nor should their columns. Browsers divide space based on content and forced white-space will hurt readability. To ensure rogue strings don't cause visual wonk, we limit cells widths to ~45 characters.
-
-
-
-### Row headings
-
-
-
-If your data set has keys on two axes, we also support setting the starting column as a row heading. This is helpful when you expect the user tuseze a known value for data lookup (e.g. "Which missions went to Mars?").
-
-Be sure to identify your row heading column as well. That is, don't leave a blank cell in the starting header column. Our secondary headings need context too!
-
-
-
-
-
-
- Big and small planets
-
-
- Information about the largest and smallest planets.
-
-
- Planet
- Radius (km)
- Type
- Descriptor
-
-
-
-
- Jupiter
- 69,911
- Gas giant
- Jovian
-
-
- Earth
- 6,371
- Terrestrial
- Terran
-
-
- Mercury
- 1,737
- Terrestrial
- Mercurial
-
-
-
-
-
-
-### Row groupings
-
-
-
-If you need to group rows by a shared data point, we also support using rowspan to do so. Otherwise, follow the same implementation guidelines as above.
-
-Note: spanning multiple rows or columns may cause issues for assistive technologies.
-
-
-
-
-
-
- Big and small planets
-
-
- Information about some of the largest and smallest planets.
-
-
- Type
- Planet
- Radius (km)
- Descriptor
-
-
-
-
- Gas giants
- Jupiter
- 69,991
- Jovian
-
-
- Saturn
- 58,232
- Saturnian
-
-
- Terrestrial
- Earth
- 6,371
- Terran
-
-
- Venus
- 6,052
- Venusian
-
-
- Mars
- 3,389
- Martian
-
-
-
-
-
-
-## Content guidelines
-
-
-
-Titles & captions should describe the table the user is viewing. They are not abstractions.
-
-Reserve the starting column for your most important data. Cascade lower priority data toward the end.
-
-Don't use long column headings. Try to keep them as short as or shorter than your column content.
-
-Don’t create complex interactions that change the state of the row. Tables are primarily for reviewing data, not interacting with it.
-
-
-
-### Supported content types
-
-
-
-The basic Table cell styling is based on what is most legible and scannable for a normal string of text. However, different data types may need alternate styling.
-
-Currently, we provide extra support for numerical data, dates, Buttons, Statuses, and Checkboxes.
-
-
-
-
-
-
- Big and small planets
-
-
-
-
-
-
-
-
-Checkboxes
-
-Include checkboxes in the first column. The heading checkbox should check/uncheck all rows when clicked.
-
-If mixed, the heading checkbox should be set to Indeterminate.
-
-
-
-
-Numerical data
-
-We use tabular numbers and end-align figures for quick scanning.
-
-Leave off any units. Instead, specify them in the column's header.
-
-
-
-
-Statuses
-
-No extra styling is required when adding Statuses to your table. Ensure their labels are hidden and their column has an appropriate heading.
-
-
-
-
-Dates
-
-To maintain ease of reading, dates should not be line-broken. White-space is preserved throughout the column. This applies to all date formats.
-
-
-
-
-Empty cells
-
-If a cell is empty, use an en dash (–) to indicate this.
-
-
-
-
-Buttons
-
-No extra styling is required when adding Buttons to a table. They will resize to the "Small" variant and align to the baseline of other type in the row.
-
-
-
-
-## Accessibility
-
-### Titles and captions
-
-
-
-Each Table should have both a title and a caption.
-
-The title is the visible heading for your table. A concise, descriptive title will provide users with a direct context for your data. The needed context may be missing if you rely on page headings or surrounding body copy.
-
-Captions are visually hidden. Providing a caption will give users of assistive technologies context for the table before it is accessed.
-
-
-
-### Complicated tables
-
-
-
-Try to refrain from using complicated table layouts that rely on colspan or rowspan.
-
-This same advice applies to nested tables or hidden rows as well. They can introduce problems that make your table inaccessible for some users.
-
-
-
-:::
-
-::: slot html-scss
-
-## Basic usage
-
-
-
-
-
- Big and small planets
-
-
- Information about the largest and smallest planets.
-
-
- Planet
- Radius (km)
- Type
- Perihelion date
-
-
-
-
- Jupiter
- 69,911
- Gas giant
- January 21, 2023
-
-
- Earth
- 6,371
- Terrestrial
- January 2, 2021
-
-
- Mercury
- 1,737
- Terrestrial
- –
-
-
-
-
-
- Big and small planets
-
-
- Information about the largest and smallest planets.
-
-
-
- Planet
- Radius (km)
- Type
- Perihelion date
-
-
-
-
- Jupiter
- 69,911
- Gas giant
- January 21, 2023
-
-
- Earth
- 6,371
- Terrestrial
- January 2, 2021
-
-
- Mercury
- 1,737
- Terrestrial
- –
-
-
-
-
-```
-
-
-
-## Row headings
-
-
-
-
-
- Big and small planets
-
-
- Information about the largest and smallest planets.
-
-
- Planet
- Radius (km)
- Type
- Perihelion date
-
-
-
-
- Jupiter
- 69,911
- Gas giant
- January 21, 2023
-
-
- Earth
- 6,371
- Terrestrial
- January 2, 2021
-
-
- Mercury
- 1,737
- Terrestrial
- –
-
-
-
-
-
- Big and small planets
-
-
- Information about the largest and smallest planets.
-
-
-
- Planet
- Radius (km)
- Type
- Perihelion date
-
-
-
-
- Jupiter
- 69,911
- Gas giant
- January 21, 2023
-
-
- Earth
- 6,371
- Terrestrial
- January 2, 2021
-
-
- Mercury
- 1,737
- Terrestrial
- –
-
-
-
-
-```
-
-
-
-## Row grouping
-
-
-
-
-
- Big and small planets
-
-
- Information about some of the largest and smallest planets.
-
-
- Type
- Planet
- Radius (km)
- Descriptor
- Perihelion date
-
-
-
-
- Gas giants
- Jupiter
- 69,991
- Jovian
- January 21, 2023
-
-
- Saturn
- 58,232
- Saturnian
- November 29, 2032
-
-
- Terrestrial
- Earth
- 6,371
- Terran
- January 2, 2021
-
-
- Venus
- 6,052
- Venusian
- –
-
-
- Mars
- 3,389
- Martian
- August 3, 2020
-
-
-
-
-
- Big and small planets
-
-
- Information about some of the largest and smallest planets.
-
-
-
- Type
- Planet
- Radius (km)
- Descriptor
- Perihelion date
-
-
-
-
- Gas giants
- Jupiter
- 69,991
- Jovian
- January 21, 2023
-
-
- Saturn
- 58,232
- Saturnian
- November 29, 2032
-
-
- Terrestrial
- Earth
- 6,371
- Terran
- January 2, 2021
-
-
- Venus
- 6,052
- Venusian
- –
-
-
- Mars
- 3,389
- Martian
- August 3, 2020
-
-
-
-
-```
-
-
-
-## Empty tables
-
-
-
-
-
- Big and small planets
-
-
- Information about the largest and smallest planets.
-
-
- Planet
- Radius (km)
- Type
- Perihelion date
-
-
-
-
-
-
-
- Aw beans. This set of filters didn't return any results.
-
-
-
-
-
-
- Big and small planets
-
-
- Information about the largest and smallest planets.
-
-
-
- Planet
- Radius (km)
- Type
- Perihelion date
-
-
-
-
-
- Aw beans. This set of filters didn't return any results.
-
-
-
-
-
-```
-
-
-
-## Checkboxes
-
-
-
-
-
- Big and small planets
-
-
-
-
- Big and small planets
-
-
-```
-
-
-
-## Sorting Table
-
-
-
-
-
- Big and small planets
-
-
- Information about the largest and smallest planets.
-
-
-
- Planet
-
-
- Radius (km)
-
-
- Type
-
-
- Perihelion date
-
-
-
-
-
- Jupiter
- 69,911
- Gas giant
- January 21, 2023
-
-
- Earth
- 6,371
- Terrestrial
- January 2, 2021
-
-
- Mercury
- 1,737
- Terrestrial
- –
-
-
-
-
-
- Big and small planets
-
-
- Information about the largest and smallest planets.
-
-
-
-
- Planet
-
-
- Radius (km)
-
-
- Type
-
-
-
- Perihelion date
-
-
-
-
-
-
- Jupiter
- 69,911
- Gas giant
- January 21, 2023
-
-
- Earth
- 6,371
- Terrestrial
- January 2, 2021
-
-
- Mercury
- 1,737
- Terrestrial
- –
-
-
-
-
-```
-
-
-
-:::
diff --git a/packages/.archived/docs/components/tag.md b/packages/.archived/docs/components/tag.md
deleted file mode 100644
index 9cee98cfe5..0000000000
--- a/packages/.archived/docs/components/tag.md
+++ /dev/null
@@ -1,184 +0,0 @@
----
-template: component
-id: component-tag
-title: Tag
-description: Tags are used to help describe and differentiate an entity or object.
-lede: Use Tags to help describe and differentiate an entity or object. Think of them as “adjectives” in your UI toolbox that make navigating and parsing content easier.
-tabs:
- - label: "Overview"
- id: "overview"
- - label: "HTML & SCSS"
- id: "html-scss"
-links:
- - icon: github
- label: View source
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/components/_tag.scss
- - icon: figma
- label: View designs
- href: https://www.figma.com/file/AQcK0mLE4JHBm2Vci8ulAF/Tag?node-id=25%3A2
----
-
-::: slot overview
-
-## Anatomy
-
-
-
-Tag UI is simple. It consists of typography and spacing within a neutral container. Color, weight, and spacing help distinguish it from Button.
-
-
-
-
-
-Tags are a great way for users to contextualize and understand the content they are looking at. They’re also helpful at organizing content across multiple experiences.
-
-As stated above, Tags are for describing an entity or object, not representing one. You may associate one or many tags with an entity.
-
-For example, "Shuttle" may be an individual type of spaceship that has the Tags "Winged", "Reusable", and "NASA".
-
-
-
-
-
- Winged
- Reusable
- NASA
-
-
-
-### Describe an object, don’t be the object
-
-
-
-Use Tags as descriptors paired with a particular object. These descriptors may be adjectives, categories, or other associations including proper nouns.
-
-
-
-
-
-
-
-
-
- Operational Spacecraft
-
-
- Constructed
-
-
-
-
-
-
- Soyuz
-
-
- 1966
-
-
-
- Saturn V
-
-
- 1967
-
-
-
- CZ-2F
-
-
- 1999
-
-
-
-
-
-
-
-
-
-
-
-
- Agency
-
-
- Formed
-
-
-
-
-
-
-
-
-
- 1958
-
-
-
-
-
-
-
- 1992
-
-
-
-
-
-
-
- 1993
-
-
-
-
-
-
-
-:::
-
-::: slot html-scss
-
-## Basic example
-
-
-
-
- Tag 1
- Tag 2
- Tag 3
-
-
- Tag 1
- Tag 2
- Tag 3
-
-```
-
-
-
-:::
diff --git a/packages/.archived/docs/components/text-input.md b/packages/.archived/docs/components/text-input.md
deleted file mode 100644
index e995941fc3..0000000000
--- a/packages/.archived/docs/components/text-input.md
+++ /dev/null
@@ -1,732 +0,0 @@
----
-template: component
-id: component-text-input
-title: Text Input
-description: Text inputs allow users to edit and input data.
-lede: Text inputs allow users to edit and input data. They can range from simple search boxes to long-form text areas.
-tabs:
- - label: "Overview"
- id: "overview"
- - label: "HTML & SCSS"
- id: "html-scss"
-links:
- - icon: github
- label: View source
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/components/_text-input.scss
- - icon: figma
- label: View designs
- href: https://www.figma.com/file/tVkWsXwnWICeguWhzX6Vwl/Inputs?node-id=476%3A3848
----
-
-::: slot overview
-
-## Anatomy
-
-
-
-This default serves as the basis for our Text Inputs. A shown here, they required paired with a paired Label.
-
-
-
-
-
-
- Destination
-
-
-
-
-### Search
-
-
-
-Standalone Search provides minimal UI for searching outside of normal form contexts. Search inputs will render with the "Search" UI indicator as well as a visually hidden label.
-
-In this case, we recommend using the placeholder attribute to state the scope of your search. This text should match the hidden label.
-
-
-
-
-
-
- Search planets
-
-
-
-
-#### Button variant
-
-
-
-We also provide an attached button for in-page searching or avoiding placeholder text. Please follow our [Button guidelines](/components/button) when using these variants.
-
-
-
-
-
-
-
-### Textarea
-
-
-
-Textareas should be used for multi-line text inputs. As the user types the field will grow vertically to accommodate the new lines.
-
-
-
-
-
-
-
-
- Describe your perfect planet in as many words as you need.
-
-
The perfect planet
-
-
-
-## States
-
-
-
-Text inputs support the following states: enabled, hover, focus, disabled, read-only, optional, and invalid.
-
-
-
-### Enabled
-
-
-
-Text inputs in their "normal" state are considered enabled. They are ready for user interaction.
-
-
-
-
-
-
- Destination
-
-
-
-
-### Hover
-
-
-
-Hover states are activated when the user pauses their pointer over the input.
-
-
-
-
-
-
- Destination
-
-
-
-
-### Focus
-
-
-
-The focus state is a visual affordance that the user has highlighted the input with a pointer, keyboard, or voice.
-
-
-
-
-
-
- Destination
-
-
-
-
-### Disabled
-
-
-
-Disabled inputs are unavailable for interaction and cannot be focused. They can be used when input is disallowed, possibly due to a system state or access restrictions.
-
-The values of disabled inputs will not be submitted.
-
-
-
-
-
-
- Destination
-
-
-
-
-### Read-only
-
-
-
-Similar to disabled inputs, users cannot modify the values of read-only inputs. However, users can otherwise interact with read-only inputs and select their values for copying.
-
-This state can be helpful when displaying computed or third-party values, or when a submitted form is being processed.
-
-The values of read-only inputs will be submitted.
-
-
-
-
-
-
- Destination
-
-
-
-
-### Optional
-
-
-
-Odyssey assumes inputs are required by default. Optional inputs should be used to indicate when data is not required for the user to complete a task.
-
-
-
-
-
-
- Destination Optional
-
-
-
-
-### Invalid
-
-
-
-The invalid state is for inputs with incorrect values or values of the wrong format.
-
-When indicating a validation error, please use a Field Error label to indicate the nature of the error. Color alone is not an accessible way to signify that something has gone wrong.
-
-
-
-
-
-
-
-
Destination
-
- Error: This does not appear to be a valid planetoid.
-
-
-
-
-## Content Guidelines
-
-
-
-Text inputs support most free-form content, but we offer specific support for email, telephone numbers, and passwords.
-
-
-
-### Email
-
-
-
-There are no specific UI changes for email addresses, but inputs of this type will validate that the address is properly formatted.
-
-
-
-
-
-
- Email
-
-
-
-
-### Tel
-
-
-
-Unlike email fields, tel inputs are not automatically validated because global formats are so varied.
-
-
-
-
-
-
- Telephone number
-
-
-
-
-### Password
-
-
-
-Passwords inputs ensure that sensitive content is safely obscured.
-
-
-
-
-
-
- Authorization code
-
-
-
-
-## Accessibility
-
-### Placeholders
-
-
-
-Except for Search inputs, we advise against using placeholder text for inputs.
-
-
-
-### Purpose
-
-
-
-When collecting an individual's personal data, you must define the input's purpose via the `autocomplete` attribute. This allows users to automate the filling of fields and ensures the purpose is known, regardless of the label. A complete list of fields this is required for may be found in the WCAG spec .
-
-
-
-#### Translation
-
-
-
-To prevent triggering a change in page layout, browsers don't translate certain attributes. Because of this, users will see untranslated placeholder text.
-
-
-
-#### Recall
-
-
-
-Placeholder text disappears when a field is interacted with. For this reason, it's not suitable for formatting guidelines or necessary context.
-
-
-
-#### Utility
-
-
-
-Placeholder content is limited to static text. Additionally, placeholder text is truncated beyond the width of its input.
-
-
-
-#### Field value confusion
-
-
-
-Low-contrast placeholders may be illegible for some users. Yet, placeholders with compliant contrast can be mistaken for field values. High Contrast Mode will make placeholders and values appear identical.
-
-Finally, Users with low digital literacy may not understand the purpose or behavior of placeholder text.
-
-
-
-:::
-
-::: slot html-scss
-
-## Types
-
-
-
-Out of the box, Odyssey supports input types for `text`, `email`, `search`, `tel`, and `password` with more coming soon.
-
-
-
-## Text
-
-
-
-
-
- Field label
-
-
-
-
- Field label
-
-
-```
-
-
-
-### Email
-
-
-
-
-```html
-
-
- Email
-
-
-```
-
-
-
-### Telephone
-
-
-
-
-
- Telephone number
-
-
-
-
- Telephone number
-
-
-```
-
-
-
-### Password
-
-
-
-
-```html
-
-
- Password
-
-
-```
-
-
-
-### Search
-
-
-
-
- Search
-
-
-
-```html
-
- Search
-
-```
-
-
-
-### Search with attached primary button
-
-
-
-
-
- Button label
-
-
-
-
- Button label
-
-
-```
-
-
-
-### Search with attached secondary button
-
-
-
-
-
- Button label
-
-
-
-
-
- Button label
-
-
-
-```
-
-
-
-## Textarea
-
-
-
-
-
-
-
- Descriptive field hint
-
-
Field label
-
-
-
-
-```
-
-
-
-## States
-
-### Disabled
-
-
-
-
-
- Field label
-
-
-
-
- Field label
-
-
-```
-
-
-
-### Optional label
-
-
-
-
-
- Field label Optional
-
-
-
-
- Field label Optional
-
-
-```
-
-
-
-### Invalid label
-
-
-
-Because of the current inability to ensure consistent validation behavior across browsers, we're using the `.is-ods-input-invalid` class to indicate this state.
-
-
-
-
-
-
-
-
-
Field label
-
- Error: Invalid error description
-
-
-
-
-
-
Field label
-
- Error: Invalid error description
-
-
-```
-
-
-
-:::
diff --git a/packages/.archived/docs/components/toast.md b/packages/.archived/docs/components/toast.md
deleted file mode 100644
index fb1204072e..0000000000
--- a/packages/.archived/docs/components/toast.md
+++ /dev/null
@@ -1,503 +0,0 @@
----
-template: component
-id: component-toast
-title: Toast
-lede: Toasts are transient, non-disruptive messages that provide at-a-glance, asynchronous feedback or updates.
-description: Toasts are transient bits of messaging that provide quick, at-a-glance feedback.
-tabs:
- - label: "Overview"
- id: "overview"
- - label: "HTML & SCSS"
- id: "html-scss"
-links:
- - icon: github
- label: View source
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/components/_toast.scss
- - icon: figma
- label: View designs
- href: https://www.figma.com/file/da96Y9G5jD8TjpBp0bTAvB/Toast?node-id=25%3A2
----
-
-::: slot overview
-
-## Anatomy
-
-
-
-Each Toast is made up of up to four parts: Icon & Color, Title, Body, and a Dismiss Button.
-
-
-
-
-
-
- Icon & Color
- These are mapped to the different variants of Toast and shouldn't be mixed.
- Title
- Provides quick context; one line max
- Body (Optional)
- Supplemental information. Be concise - less than three lines of content - as your Toast will soon vanish!
- Dismiss "X"
- Included to ensure users are able to dismiss Toasts manually. Placement is handled automatically based on content.
-
-
-
-
-
-
-
-
-
-## Behavior
-
-
-
-Toasts may be triggered by different types of events, but they are always transient. With this in mind, Toasts should not include any interactive or long-form content.
-
-The Toast pen will take care of positioning and layout automatically. Toasts will appear in the bottom, ending corner above all other content.
-
-If multiple Toasts are triggered in a short time, they will stack in order of appearance. For visual consistency, Toasts will resize to match the largest Toast visible.
-
-
-
-## Variants
-
-### Info
-
-
-
-Use Info Toasts to surface neutral information to users.
-
-This is the default variant for this component.
-
-Launch Toast
-
-
-
-
-
-
-
-
-### Success
-
-
-
-Use Success Toasts to inform users of successful or completed processes.
-
-Launch Toast
-
-
-
-
-
-
-
-
-### Caution
-
-
-
-Use Caution Toasts to inform users of tasks or processes that may need their attention.
-
-When using the Caution variant, ensure the user does not need more context than you can give in the space available.
-
-Launch Toast
-
-
-
-
-
-
-
-
-### Danger
-
-
-
-Use Danger Toasts to inform users that an error has occurred.
-
-When using a Danger Toast, be sure that the error is also logged elsewhere, so a user can refer to it later.
-
-Do not use Danger Toasts for in-page errors such as invalid form fields. Instead, use static messaging the user can refer to while addressing their error.
-
-Launch Toast
-
-
-
-
-
-
-
-
-## References
-
-
-
-
-
- Related Components
-
-
- Differences between the available alert components
-
-
- Component
- Available Variants
-
-
- Dynamic
-
-
-
-
-
- Transient
-
-
-
-
-
- Dismissable
-
-
-
-
-
- Actionable
-
-
-
-
-
-
-
- Banner Info, Caution, Danger
- No
- No
- Yes
- Yes
-
-
- Infobox Success, Caution, Danger
- Yes
- No
- No
- Yes
-
-
- Toast
- Info, Success, Caution, Danger
- Yes
- Yes
- Yes
- No
-
-
-
-
-
-
-
-:::
-
-::: slot html-scss
-
-## Basic usage
-
-### Info
-
-
-
-
-
-```html
-
-
-
-
-
- Title (optional)
- Toast body text.
-
-```
-
-
-
-### Success
-
-
-
-
-
-```html
-
-
-
-
-
- Title (optional)
- Success Toast body text.
-
-```
-
-
-
-### Caution
-
-
-
-
-
-```html
-
-
-
-
-
- Title (optional)
- Caution Toast body text.
-
-```
-
-
-
-### Danger
-
-
-
-
-
-```html
-
-
-
-
-
- Title (optional)
- Danger Toast body text.
-
-```
-
-
-
-## Toast pen
-
-
-
-`.ods-toast-pen` provides a container which is positioned fixed to the bottom, ending corner of a page. When a toast element is appended to it, motion is automatically handled for you using CSS animation.
-
-
-
-
-
-
-
-
-
-
-
-
- Title (optional)
- Danger Toast body text.
-
-
-
-
-
-
-
-
- Title (optional)
- Danger Toast body text.
-
-
-
-:::
-
-
diff --git a/packages/.archived/docs/components/tooltip.md b/packages/.archived/docs/components/tooltip.md
deleted file mode 100644
index 9b5a61bd4c..0000000000
--- a/packages/.archived/docs/components/tooltip.md
+++ /dev/null
@@ -1,380 +0,0 @@
----
-template: component
-id: component-tooltip
-title: Tooltip
-description: A contextual pop-up that provides a label for or description of an element.
-lede: A transient element that provides additional context for an element when it receives hover or focus.
-tabs:
- - label: "Overview"
- id: "overview"
- - label: "HTML & SCSS"
- id: "html-scss"
-links:
- - icon: github
- label: View source
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/components/_tooltip.scss
- - icon: figma
- label: View designs
- href: https://www.figma.com/file/9wQUMt72muf6mEGuHhHRZM/Tooltips?node-id=25%3A2
----
-
-::: slot overview
-
-## Anatomy
-
-
-
-Tooltips activate when a cursor hovers over an element, or an element receives focus. They can be triggered both by a parent container or a paired sibling.
-
-Tooltips vanish when a user stops hovering or changes focus. To maintain parity with the browser's tooltip behavior, they will not disappear otherwise.
-
-The cursor displayed when hovering UI is determined by the element, not the Tooltip.
-
-
-
-
-
- Be sure to check the
-
- AOCS
-
- Attitude and Orbit Control System
-
-
- before liftoff.
-
-
-
-## Usage
-
-
-
-Use Tooltips to help users understand unfamiliar objects or states that aren’t described by the visible UI.
-
-Well-placed tooltips provide info when needed and need minimal user effort to trigger.
-
-
-
-### Use when...
-
-#### No text label is present
-
-
-
-Use Tooltips with all controls that rely solely on iconography for communicating meaning.
-
-This is especially important to distinguish between visually or contextually similar UI. Tooltips are also helpful with rarely-used features or features with variant interpretations.
-
-Our Button component offers more guidance if needed.
-
-
-
-
-
-
-
-
-
-
-
-
-
-#### An element benefits from supplemental information
-
-
-
-This may be the case for disabled controls or inline content like abbreviations.
-
-
-
-
-
-
-
- Launch
-
-
-
-
-
-
-### Don't use when...
-
-#### Users need to interact with the content
-
-
-
-Tooltips are transient by design, which makes them a bad candidate for interactive content. Do not include links, buttons, or other controls within a Tooltip.
-
-
-
-
-
-
- Launch
-
-
-
-
-
-#### Rich content or imagery is required
-
-
-
-Tooltips should provide simple, textual descriptions. If your content requires formatting or imagery, users may have difficulty parsing them.
-
-
-
-
-
-
- Launch
-
-
-
-
-
-### Positioning Tooltips
-
-
-
-When positioning a Tooltip, ensure:
-
-- The Tooltip is paired with the element being described.
-- You plan for responsive web design concerns.
-- Placement doesn't interfere with the object of interest or relevant information.
-- The Tooltip is always visible when activated, not cropped or off-page.
-
-
-
-
-
-
- Top
-
-
-
- End
-
-
-
- Bottom
-
-
-
- Start
-
-
-
-
-## Content
-
-### Succinct
-
-
-
-Tooltips should contain short, descriptive text. A single sentence or even a sentence fragment is ideal.
-
-The content should be new information. Tooltips should not repeat copy from visible UI.
-
-
-
-### Static
-
-
-
-Tooltips should contain static content. Users don't expect, and are unlikely to notice, dynamic changes to Tooltip contents.
-
-**Exception:** Tooltips may contain dynamic content if two requirements are met:
-
-- The tooltip is present at all times during the content change
-- The tooltip is reporting real-time change (e.g. "Copy" changes to "Copied!" on a click-to-copy button)
-
-
-
-## Accessibility
-
-### Animation
-
-
-
-Per ARIA guidelines , our tooltips triggered by hovering or focusing UI and employ a short delay before animating.
-
-
-
-### Tooltip as a label
-
-
-
-When using tooltips as a label, assistive technologies will treat the Tooltip content as a name.
-
-Assistive technologies will read out this example as "Edit".
-
-
-
-
-
-
-
-
-
-
-
-## Responsive considerations
-
-
-
-Focusing and hovering are typically unavailable on touchscreen devices. Some devices may also trigger a "click" at the same time. For this reason, Tooltips may be completely invisible for users of these devices.
-
-Consider fallback alternatives on a case-by-case basis.
-
-When possible, provide inline text that becomes visible on touchscreen devices. Otherwise, a fixed-position fallback is provided for mobile devices.
-
-
-
-:::
-
-::: slot html-scss
-
-## Position: Top
-
-
-
-
-```html
-
-
- ...
-
-
-
-```
-
-
-
-## Position: End
-
-
-
-
-```html
-
-
- ...
-
-
-
-```
-
-
-
-## Position: Bottom
-
-
-
-
-```html
-
-
- ...
-
-
-
-```
-
-
-
-## Position: Start
-
-
-
-
-```html
-
-
- ...
-
-
-
-```
-
-
-
-:::
diff --git a/packages/.archived/docs/help.md b/packages/.archived/docs/help.md
deleted file mode 100644
index ed97b41847..0000000000
--- a/packages/.archived/docs/help.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-template: plain
-title: Help
-headline: Need Help?
-lede: The Odyssey team is here to help as best we can. Don't hesitate to reach out!
-description: The Odyssey team is here to help as best we can. Don't hesitate to reach out!
----
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-## Office hours
-
-Every week we hold office hours where you can share, chat, and collaborate with the entire Odyssey team. It’s a great way for us to learn and improve, while helping you solve problems for your users.
-
-
-
-
-
-
diff --git a/packages/.archived/docs/icons.md b/packages/.archived/docs/icons.md
deleted file mode 100644
index d74faeb257..0000000000
--- a/packages/.archived/docs/icons.md
+++ /dev/null
@@ -1,275 +0,0 @@
----
-id: icons
-template: plain
-pageHeaderVariant: icon
-title: Icons
-headline: Icons
-lede: A system of icons which establishes a visual language that can be easily understood regardless of age, language or culture.
-tabs:
- - label: "Overview"
- id: "overview"
----
-
-
-
-
-
-
- Library
-
-
-
-
- Icon
- Name
- Use
-
-
-
-
- Caution
- To indicate a crucial decision
-
-
- Search
- To search for something
-
-
- Get info
- To get information
-
-
- User
- To support a user name
-
-
- Copy
- To copy text
-
-
- Delete
- To delete something
-
-
- Download
- To download
-
-
- Notification
- To notify the user of something
-
-
- Close
- To close a modal or other UI
-
-
- Complete
- To show a completed process
-
-
- Error
- To indicate an error
-
-
- Go forward
- To navigate forward
-
-
- Go backward
- To navigate backward
-
-
- Edit
- To edit something
-
-
- Settings
- To edit user or app settings
-
-
- Plus
- To add
-
-
- Minus
- To subtract or remove
-
-
- Filter
- To filter results
-
-
-
-
-
-
-## Built on a grid
-
-
-
-Every icon is built on a grid at a specific size. This ensures not only visual consistency, but allows us to easily swap icons in various applications.
-
-
-
-
-
-
-### Design your own
-
-
-
-This grid is also included as a component in Figma. If you need to create something new, just drag out an instance and start drawing.
-
-
-
-## Guidelines
-
-### Page structure first
-
-
-
-Once your structure is solid, and you get to the point where icons, delight & Co. can come into play, follow this simple rule: Use as few icons as necessary—but not fewer.
-
-Add icons at the very end of the design process, do not play with icons while working on your wireframes.
-
-
-
-### UI indicators vs. icons
-
-
-
-UI indicators are visual indicators that are baked into UIs like the radio circle, checkbox check, and select caret. In some cases we can override these indicators to match our overall aesthetics and style which can make it seem like they are icons.
-
-
-
-
-
-
-### When to use an icon
-
-
-
-If you want to call attention to an action you want a user to take, icons make good targets and break up text.
-
-
-
-
-
-
- Add astronaut
-
-
-
-
-
-
-### Use words
-
-
-
-Almost all icons should be accompanied by copy. By doing so, you won't leave users guessing what an icon represents.
-
-As best practice, use a verb to suggest an action. For more clarity use a verb + noun.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Add
-
-
-
-### Choosing an icon
-
-
-
-It’s recommended to use a word to accompany an icon. Like the previous example shows, icons should call attention to the action and the icon should follow suit. Depending on the situation, some icons are better for clicking, where others are better suited as static.
-
-
-
-
-
-
-
-
-
-
-As a result, this will drastically reduce the amount of icons we have, increase understanding and clarity in our actions.
-
-
-
-
-
-
-
-
-### Color
-
-
-
-By default, all icons are Grey 900. If using an icon on top of a solid color, for example in a primary button, it should be White. As a general guideline, icons should be the same color as their accompanying text.
-
-
-
-
-
-
-
-
-
-
-As an example, if you have a “Abort mission” button, do not colorize the delete button or trashcan icon with Green 400.
-
-
-
-
-
-
-
-
-
-
-## Knowledgeable
-
-Okta is a technical product. It’s the role of Design to simplify unfamiliar and complex concepts. Ask questions, verify assumptions, dig into the needs and goals. Only once you understand the problem deeply can you solve it effectively.
-
-💡 Helpful questions to ask:
-
-- Has my team articulated the business goals and the needs of the user or audience? Are we all aligned?
-- Do I have enough domain knowledge and information to make decisions with confidence and back them up with the broader team?
-- Do I understand the constraints (technical, budget, time)?
-
-
-
-
-
-## Clear
-
-Our job is to eliminate ambiguity. We empower users to move forward with confidence, knowing what will happen next and why. Our designs should be clear over clever, digestible over exhaustive.
-
-💡 Helpful questions to ask:
-
-- How might the words or images I’ve used be interpreted differently than I intended? Can I eliminate confusion?
-- What is the one thing people must take away from my work? Are they able to do that without unnecessary friction?
-- Can I edit or break up content to make it more digestible?
-- Have I eliminated any words that add critical context?
-
-
-
-
-
-## Cohesive
-
-A person’s experience with Okta may be broad and each touchpoint should feel like part of one Okta. Make use of existing patterns, only deviating when the benefits outweigh the costs. Consider dependencies, downstream effects, and the larger implications of our work to create a thoughtful, cohesive experience for our users.
-
-💡 Helpful questions to ask:
-
-- What existing patterns, messaging, visuals, terminology, etc. can I reuse or build upon for my work?
-- If I’m designing something new, what are the risks and benefits? Can this new element be reused in the future?
-- What expectations might I be setting in my work that will need to be met in other areas of the experience? How can I collaborate with the necessary teams to ensure a smooth customer experience?
-
-
-
-
-
-## Human
-
-While some who use Okta are highly technical, many are not. But all are human. Be approachable and accessible—in both our visual design and our language. Be compelling. Demonstrate the value of Okta in human, real-world terms.
-
-💡 Helpful questions to ask:
-
-- How can the practice of storytelling and crafting a narrative improve my work?
-- Am I using technical jargon that can be translated to more common or friendly language? Do I explain acronyms?
-- Can I do more to frame my work in terms of day-to-day, real world problems? What more can I do to demonstrate the value of Okta in a relatable way?
-
-
diff --git a/packages/.archived/docs/type-test-arabic.md b/packages/.archived/docs/type-test-arabic.md
deleted file mode 100644
index eb133ce341..0000000000
--- a/packages/.archived/docs/type-test-arabic.md
+++ /dev/null
@@ -1,244 +0,0 @@
----
-template: plain
-id: base-type
-title: Type Examples
-headline: Type Examples
-lede: A comprehensive set of mixed-content, in-situ type specimens for Arabic.
-description:
----
-
-
-
-# هذا هو عنوان المستوى الأول
-
-يقوم Vangelis بإشعال الطاقة المخبأة في المادة النجمية tesseract التي تحصد ضوء النجوم وتحافظ على تلك المستعمرات ذات النقاط الزرقاء الباهتة وتعتز بها. مواطنون محدودون ولكن غير مقيدون من عصور بعيدة ، مواطنون من حقب بعيدة ، أثارهم مواطنو النجوم من عصور بعيدة بقصص جميلة لا يوجد دليل جيد عليها.
-
-غنية بالذرات الثقيلة ، رماد شبكة الكيمياء النجمية من الثقوب الدودية التي تدعونا السماء بشيء لا يصدق ينتظر أن نعرفه هو مخلوقات الكون.
-
-## هذا هو عنوان المستوى الثاني
-
-مليار تريليون دهشة تحافظ وتعتز بهذه الشجاعة ذات النقطة الزرقاء الباهتة لأسئلتنا هيباتيا التي ننطلق منها. قهر قلوب النجوم في المحيط الكوني المستحيل مرحلة صغيرة جدًا في ساحة كونية واسعة قهر المستحيل يخترع الكون.
-
-ذرة من الغبار معلقة في شعاع الشمس ، يحلم الكربون الموجود في فطائر التفاح لدينا بشيء لا يصدق ينتظر أن يُعرف اتساعه لا يمكن تحمله إلا من خلال مجموعة النجوم الكروية المحببة؟
-
-### هذا هو عنوان المستوى الثالث
-
-المغامرة بشيء لا يصدق ينتظر أن يعرف عن حلقات كوكب أورانوس خارج الكوكب ذرة من الغبار معلقة في شعاع الشمس كائنات ذكية؟ تجمع النجوم الكروية الكربون في فطائر التفاح على مر القرون ، المنزل الوحيد الذي عرفناه في مستعمرات Apollonius of Perga.
-
-شبكة من الثقوب الدودية لا يزال فجرًا مجيدًا ينتظر شبكة من الثقوب الدودية. شبكة من الثقوب الدودية تخترع الكون عالمًا آخر بقصص جميلة لا يوجد دليل جيد لها على أن ذرات الهيدروجين هي مرحلة صغيرة جدًا في ساحة كونية واسعة.
-
-#### هذا هو عنوان المستوى الرابع
-
-إلى أي مدى بعيد حلم عين العقل لا يزال الفجر المجيد ينتظر استكشافات Tunguska Event Encyclopaedia galactica. من خلالها نخرج مواطنين من عصور بعيدة الكربون في فطائر التفاح الخاصة بنا إقليدس مراقب خارج كوكب الأرض شيء لا يصدق ينتظر أن يعرف.
-
-يحركه نجم قزم أبيض شيء لا يصدق ينتظر أن يعرف مئات الآلاف من الفلكيين الذين ينحدرون من أجزاء من الزغب المتحرك. قلوب النجوم شيء لا يصدق ينتظر أن يكون معروفًا قزمًا أبيض رماد الخيمياء النجمية غير الواضحة من الصخور والغاز المواطنين في العصور البعيدة.
-
-##### هذا هو عنوان المستوى الخامس
-
-احلم بعين العقل بعالم آخر بقصص جميلة لا يوجد دليل جيد على Apollonius of Perga بشيء لا يصدق ينتظر أن يُعرف بنوبة الموت العالمية. السماء تدعونا إلى الأرض المسطحة تتطلب الادعاءات غير العادية أدلة غير عادية تتطلب الادعاءات غير العادية أدلة غير عادية. ذهول الدماغ هو بذرة الذكاء.
-
-تتطلب قلوب النجوم في بحر الهدوء ادعاءات غير عادية من الأدلة غير العادية لشبكة من الثقوب الدودية لقلوب مراقبين خارج كوكب الأرض للنجوم.
-
-###### هذا هو عنوان المستوى السادس
-
-ثقافة استكشافات القزم الأبيض بحر الهدوء نواتج غير واضحة من الصخور والغازات من الزغب المتحرك. باعتبارها بقعة ضوء كوزموس تريليون غنية بسفينة الخيال الغامضة جان فرانسوا شامبليون.
-
-لا يمكن تحمل الاتساع إلا من خلال وخز الحب في العمود الفقري لذرات الهيدروجين التي تم جمعها بواسطة الجاذبية سيف أوريون المنزل الوحيد الذي عرفناه على الإطلاق. هناك شيء لا يصدق ينتظر أن يُعرف برماد الكيمياء النجمية التي تنادينا بها السماء تنادينا بشجاعة من أسئلتنا المنزل الوحيد الذي عرفناه على الإطلاق؟
-
-
-
-# هذا هو العنوان الأول المكدس
-
-## هذا هو العنوان الثاني المكدس
-
-### هذا هو العنوان الثالث المكدس
-
-#### هذا هو العنوان الرابع المكدس
-
-##### هذا هو العنوان الخامس المكدس
-
-###### هذا هو العنوان السادس المكدس
-
-
-
-# هذه مجموعة من الأكوام المتناوبة
-
-## هذا هو العنوان الثاني المختلط
-
-يقوم Vangelis بإشعال الطاقة المخبأة في المادة النجمية tesseract التي تحصد ضوء النجوم وتحافظ على تلك المستعمرات ذات النقاط الزرقاء الباهتة. مواطنون محدودون ولكن غير مقيدون من عصور بعيدة ، مواطنون من حقب بعيدة ، أثارهم مواطنو النجوم من عصور بعيدة بقصص جميلة لا يوجد دليل جيد عليها.
-
-### هذا هو العنوان الثالث المختلط
-
-#### هذا هو العنوان الرابع المختلط
-
-مليار تريليون دهشة تحافظ وتعتز بهذه الشجاعة ذات النقطة الزرقاء الباهتة لأسئلتنا هيباتيا التي ننطلق منها. قهر قلوب النجوم في المحيط الكوني المستحيل مرحلة صغيرة جدًا في ساحة كونية واسعة قهر المستحيل يخترع الكون.
-
-##### هذا هو العنوان الخامس المختلط
-
-###### هذا هو العنوان السادس المختلط
-
-لا يمكن تحمل الاتساع إلا من خلال وخز الحب في العمود الفقري لذرات الهيدروجين التي تم جمعها بواسطة الجاذبية سيف أوريون المنزل الوحيد الذي عرفناه على الإطلاق. هناك شيء لا يصدق ينتظر أن يُعرف برماد الكيمياء النجمية التي تنادينا بها السماء تنادينا بشجاعة من أسئلتنا المنزل الوحيد الذي عرفناه على الإطلاق؟
-
-
-
-# هذا عنوان من المستوى الأول
-
-يقوم Vangelis بإشعال الطاقة المخفية في المادة النجمية التي تحصد ضوء النجوم وتحافظ على تلك المستعمرات ذات النقاط الزرقاء الباهتة. مواطنون محدودون ولكن غير مقيدون من عصور بعيدة ، مواطنون من حقب بعيدة ، أثارهم مواطنو النجوم من عصور بعيدة بقصص جميلة لا يوجد دليل جيد عليها.
-
-
- المهم ألا تتوقف عن الاستجواب. الفضول له سبب وجوده.
- البرت اينشتاين, نصيحة الرجل العجوز للشباب: "لا تفقد أبدًا فضولًا مقدسًا" ، مجلة لايف (2 مايو 1955) تصريح لوليام ميلر ، ص. 64.
-
-
-غنية بالذرات الثقيلة ، رماد شبكة الكيمياء النجمية من الثقوب الدودية التي تدعونا السماء بشيء لا يصدق ينتظر أن نعرفه هو مخلوقات الكون.
-
-## هذا هو عنوان المستوى الثاني
-
-مليار تريليون دهشة تحافظ وتعتز بهذه الشجاعة ذات النقطة الزرقاء الباهتة لأسئلتنا هيباتيا التي ننطلق منها. قهر قلوب النجوم في المحيط الكوني المستحيل مرحلة صغيرة جدًا في ساحة كونية واسعة قهر المستحيل يخترع الكون.
-
-
-
- الكواكب الكبيرة والصغيرة
-
-
- معلومات عن أكبر وأصغر الكواكب.
-
-
- كوكب
- نصف القطر (كم)
- يكتب
- تاريخ الحضيض
-
-
-
-
- كوكب المشتري
- 69,911
- عملاق الغاز
- 21 يناير 2023
-
-
- أرض
- 6,371
- ساكن الأرض
- 2 يناير 2021
-
-
- الزئبق
- 1,737
- ساكن الأرض
- –
-
-
-
-
-
-ذرة من الغبار معلقة في شعاع الشمس ، يحلم الكربون الموجود في فطائر التفاح لدينا بشيء لا يصدق ينتظر أن يُعرف اتساعه لا يمكن تحمله إلا من خلال مجموعة النجوم الكروية المحببة؟
-
-### هذا هو عنوان المستوى الثالث
-
-المغامرة بشيء لا يصدق ينتظر أن يعرف عن حلقات كوكب أورانوس خارج الكوكب ذرة من الغبار معلقة في شعاع الشمس كائنات ذكية؟ تجمع النجوم الكروية الكربون في فطائر التفاح على مر القرون ، المنزل الوحيد الذي عرفناه في مستعمرات Apollonius of Perga.
-
-
- ماريو
- قبعة حمراء ، شقيق توأم أكبر ، شارب كلاسيكي
- لويجي
- قبعة خضراء ، شقيق توأم أصغر ، شارب كلاسيكي
- واريو
- قبعة صفراء ، وليست توأم ، شارب متعرج
- يحب الثوم
- Waluigi
- قبعة أرجوانية ، وليس التوأم ، شارب مدبب
-
-
-شبكة من الثقوب الدودية لا يزال فجرًا مجيدًا ينتظر شبكة من الثقوب الدودية. شبكة من الثقوب الدودية تخترع الكون عالمًا آخر بقصص جميلة لا يوجد دليل جيد لها على أن ذرات الهيدروجين هي مرحلة صغيرة جدًا في ساحة كونية واسعة.
-
-#### هذا هو عنوان المستوى الرابع
-
-إلى أي مدى بعيد حلم عين العقل لا يزال الفجر المجيد ينتظر استكشافات Tunguska Event Encyclopaedia galactica. من خلالها نخرج مواطنين من عصور بعيدة الكربون في فطائر التفاح الخاصة بنا إقليدس مراقب خارج كوكب الأرض شيء لا يصدق ينتظر أن يعرف.
-
-
- شمس
- الكواكب الداخلية
- حزام الكويكبات
- الكواكب الخارجية
- القنطور
- حزام كويبر
- سحابة أورت
-
-
-يحركه نجم قزم أبيض شيء لا يصدق ينتظر أن يعرف مئات الآلاف من الفلكيين الذين ينحدرون من أجزاء من الزغب المتحرك. قلوب النجوم شيء لا يصدق ينتظر أن يكون معروفًا قزمًا أبيض رماد الخيمياء النجمية غير الواضحة من الصخور والغاز المواطنين في العصور البعيدة.
-
-##### هذا هو عنوان المستوى الخامس
-
-احلم بعيون العقل
عالم آخر بقصص جميلة لا يوجد لها سوى القليل من الأدلة
الدليل Apollonius of Perga شيء لا يصدق ينتظر أن يُعرف بنوبة الموت العالمي. السماء تدعونا
$المسطحة تتطلب الادعاءات غير العادية أدلة غير عادية
غير عادية تتطلب ادعاءات غير عادية أن دهشة الدماغ هي بذرة الذكاء.
-
-
- press@okta.com (888) 722-7871
-
-
-تتطلب قلوب Sea of Tranquility لـ
النجوم الادعاءات غير العادية شبكة أدلة غير عادية من
الثقوب الدودية النزيهة قلوب المراقبين خارج كوكب الأرض للنجوم.
-
-###### هذا هو عنوان المستوى السادس
-
-
ثقافة استكشافات القزم الأبيض بحر الهدوء نواتج غير واضحة من الصخور والغازات من الزغب المتحرك. باعتبارها بقعة ضوء كوزموس تريليون غنية بسفينة الخيال الغامضة جان فرانسوا شامبليون.
-
-
ثقافة استكشافات القزم الأبيض بحر الهدوء نواتج غير واضحة من الصخور والغازات من الزغب المتحرك. باعتبارها بقعة ضوء كوزموس تريليون غنية بسفينة الخيال الغامضة جان فرانسوا شامبليون.
-
-الاتساع يمكن تحمله فقط
من خلال وخز الحب في العمود الفقري لذرات الهيدروجين التي تم جمعها بواسطة
الجاذبية سيف أوريون الوحيد
المنزل الذي عرفناه
على الإطلاق . هناك شيء لا يصدق ينتظر أن يعرف
رماد الكيمياء النجمية التي تنادينا
السماء بشجاعة أسئلتنا المنزل الوحيد الذي عرفناه على الإطلاق؟
-
-
-
-# هذا هو العنوان الأول الذي يحتوي على كتلة
-
-
هذه مجرد نسخة.
-
-## هذا هو العنوان الثاني مع الكتلة
-
-
-
- التسمية المضمنة
-
-
-
-### هذا هو العنوان الثالث مع الكتلة
-
-
-
-#### هذا هو العنوان الرابع مع الكتلة
-
-
-
-##### هذا هو العنوان الخامس مع الكتلة
-
-
-
- تسمية الميدان
- التسمية واحد
- التسمية الثانية
- تسمية ثلاثة
-
-
-
-###### هذا هو العنوان السادس مع الكتلة
-
-
هذه مجرد نسخة.
-
-
here .
-
-Available spacing units can be seen here .
-
-Our full config is below:
-
-```scss
-$body-font-family: "Public Sans", "-apple-system", "BlinkMacSystemFont",
- "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue",
- sans-serif;
-$mono-font-family: "Inconsolata", "SFMono-Regular", Consolas, "Liberation Mono",
- Menlo, Courier, monospace;
-
-$base-font-size: 16px;
-$scale-ratio: 1.1487;
-$base-line-height: 1.5;
-$title-line-height: 1.3;
-$max-line-length: 32em;
-$type-margin: 1.5em;
-
-$size-title-1: ms(5);
-$size-title-2: ms(4);
-$size-title-3: ms(3);
-$size-title-4: ms(2);
-$size-title-5: ms(1);
-$size-title-6: ms(0);
-
-$size-body-lede: ms(1);
-$size-body-base: ms(0);
-$size-body-caption: ms(-1);
-```
-
-
- The important thing is not to stop questioning. Curiosity has its own reason for existence.
- Albert Einstein, Old Man's Advice to Youth: "Never Lose a Holy Curiosity," LIFE magazine (2 May 1955) statement to William Miller, p. 64.
-
-
-Rich in heavy atoms the ash of stellar alchemy network of wormholes the sky calls to us something incredible is waiting to be known are creatures of the cosmos.
-
-## This is 2nd level heading
-
-A billion trillion astonishment preserve and cherish that pale blue dot courage of our questions Hypatia from which we spring. Vanquish the impossible cosmic ocean hearts of the stars a very small stage in a vast cosmic arena vanquish the impossible invent the universe.
-
-
-
- Big and small planets
-
-
- Information about the largest and smallest planets.
-
-
- Planet
- Radius (km)
- Type
- Perihelion date
-
-
-
-
- Jupiter
- 69,911
- Gas giant
- January 21, 2023
-
-
- Earth
- 6,371
- Terrestrial
- January 2, 2021
-
-
- Mercury
- 1,737
- Terrestrial
- –
-
-
-
-
-
-A mote of dust suspended in a sunbeam the carbon in our apple pies dream of the mind's eye something incredible is waiting to be known vastness is bearable only through love globular star cluster?
-
-### This is 3rd level heading
-
-Venture something incredible is waiting to be known extraplanetary rings of Uranus a mote of dust suspended in a sunbeam intelligent beings? Globular star cluster the carbon in our apple pies across the centuries the only home we've ever known colonies Apollonius of Perga.
-
-
- 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
-
-
-Network of wormholes a still more glorious dawn awaits network of wormholes extraordinary claims require extraordinary evidence the sky calls to us Euclid. Network of wormholes invent the universe another world with pretty stories for which there's little good evidence hydrogen atoms a very small stage in a vast cosmic arena.
-
-#### This is 4th level heading
-
-How far away dream of the mind's eye a still more glorious dawn awaits explorations Tunguska event encyclopaedia galactica. From which we spring citizens of distant epochs the carbon in our apple pies Euclid dispassionate extraterrestrial observer something incredible is waiting to be known.
-
-
- Sun
- Inner planets
- Asteroid belt
- Outer planets
- Centaurs
- Kuiper belt
- Ort Cloud
-
-
-Stirred by starlight white dwarf something incredible is waiting to be known hundreds of thousands descended from astronomers bits of moving fluff. Hearts of the stars something incredible is waiting to be known white dwarf the ash of stellar alchemy inconspicuous motes of rock and gas citizens of distant epochs.
-
-##### This is 5th level heading
-
-Dream of the mind's eye another world with pretty stories for which there's little good evidence Apollonius of Perga something incredible is waiting to be known paroxysm of global death. The sky calls to us $Flatland extraordinary claims require extraordinary evidence extraordinary claims require extraordinary evidence astonishment brain is the seed of intelligence.
-
-
- press@okta.com (888) 722-7871
-
-
-Sea of Tranquility hearts of the stars extraordinary claims require extraordinary evidence network of wormholes dispassionate extraterrestrial observer hearts of the stars.
-
-###### This is 6th level heading
-
-White dwarf explorations culture Sea of Tranquility inconspicuous motes of rock and gas bits of moving fluff. As a patch of light cosmos trillion rich in mystery ship of the imagination Jean-François Champollion.
-
-
This is the same <pre> in a <p> for testing margin collapse and max-widths. White dwarf explorations culture Sea of Tranquility inconspicuous motes of rock and gas bits of moving fluff. As a patch of light cosmos trillion rich in mystery ship of the imagination Jean-François Champollion.
-
-Vastness is bearable only through love tingling of the spine hydrogen atoms gathered by gravity Orion's sword the only home we've ever known. Something incredible is waiting to be known the ash of stellar alchemy the sky calls to us the sky calls to us courage of our questions the only home we've ever known?
-
-This is just some copy.
-
-## This is the 2nd heading with block
-
-
-
- Inline label
-
-
-
-### This is the 3rd heading with block
-
-
-
-#### This is the 4th heading with block
-
-
-
-##### This is the 5th heading with block
-
-
-
- Field label
- Label 1
- Label 2
- Label 3
-
-
-
-###### This is the 6th heading with block
-
-This is just some copy.
-
-
-
-Vangelis kindling the energy hidden in matter tesseract star stuff harvesting star light preserve and cherish that pale blue dot colonies. Finite but unbounded citizens of distant epochs citizens of distant epochs stirred by starlight citizens of distant epochs with pretty stories for which there's little good evidence.
-
-Rich in heavy atoms the ash of stellar alchemy network of wormholes the sky calls to us something incredible is waiting to be known are creatures of the cosmos.
-
-## This is 2nd level heading w images
-
-
-
-A billion trillion astonishment preserve and cherish that pale blue dot courage of our questions Hypatia from which we spring. Vanquish the impossible cosmic ocean hearts of the stars a very small stage in a vast cosmic arena vanquish the impossible invent the universe.
-
-A mote of dust suspended in a sunbeam the carbon in our apple pies dream of the mind's eye something incredible is waiting to be known vastness is bearable only through love globular star cluster?
-
-### This is 3rd level heading w images
-
-Venture something incredible is waiting to be known extraplanetary rings of Uranus a mote of dust suspended in a sunbeam intelligent beings? Globular star cluster the carbon in our apple pies across the centuries the only home we've ever known colonies Apollonius of Perga.
-
-
-
-Network of wormholes a still more glorious dawn awaits network of wormholes extraordinary claims require extraordinary evidence the sky calls to us Euclid. Network of wormholes invent the universe another world with pretty stories for which there's little good evidence hydrogen atoms a very small stage in a vast cosmic arena.
-
-
-
-#### This is 4th level heading w images
-
-
-
-How far away dream of the mind's eye a still more glorious dawn awaits explorations Tunguska event encyclopaedia galactica. From which we spring citizens of distant epochs the carbon in our apple pies Euclid dispassionate extraterrestrial observer something incredible is waiting to be known.
-
-
-
-Stirred by starlight white dwarf something incredible is waiting to be known hundreds of thousands descended from astronomers bits of moving fluff. Hearts of the stars something incredible is waiting to be known white dwarf the ash of stellar alchemy inconspicuous motes of rock and gas citizens of distant epochs.
-
-##### This is 5th level heading w images
-
-Dream of the mind's eye another world with pretty stories for which there's little good evidence Apollonius of Perga something incredible is waiting to be known paroxysm of global death. The sky calls to us Flatland extraordinary claims require extraordinary evidence extraordinary claims require extraordinary evidence astonishment brain is the seed of intelligence.
-
-
-
-Sea of Tranquility hearts of the stars extraordinary claims require extraordinary evidence network of wormholes dispassionate extraterrestrial observer hearts of the stars.
-
-###### This is 6th level heading w images
-
-
-
-White dwarf explorations culture Sea of Tranquility inconspicuous motes of rock and gas bits of moving fluff. As a patch of light cosmos trillion rich in mystery ship of the imagination Jean-François Champollion.
-
-Vastness is bearable only through love tingling of the spine hydrogen atoms gathered by gravity Orion's sword the only home we've ever known. Something incredible is waiting to be known the ash of stellar alchemy the sky calls to us the sky calls to us courage of our questions the only home we've ever known?
diff --git a/packages/.archived/docs/updates/2020-10-02.md b/packages/.archived/docs/updates/2020-10-02.md
deleted file mode 100644
index 0f340e5bcd..0000000000
--- a/packages/.archived/docs/updates/2020-10-02.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-template: plain
-title: October 2, 2020
-headline: October 2, 2020
-lede: New Components, Icons, Color and Previews!
----
-
-## :art: Base
-
-
-
-- **Colors:** We’ve added Green-600 to provide an accessible Green for backgrounds. We’ve also updated Gray-900 to #1d1d21 to improve contrast and enable the change to Links. @JJ has combed through Figma to ensure these broad changes shouldn’t cause any breaking changes.
-- **Icons:** Caution, Copy, Filter, and Error icons are now available. We’ve also updated the "Complete" icon to help differentiate it from a plain check. Thank you to those who brought specific use cases to us over the past month - keep em coming!
-
-
-
-## 🧩 Components
-
-
-
-- **Toast** Our first transient messaging component. You can read more about use cases and check out the new UI in our docs. Special thanks to Nicolas B. for his early work here! (Joe J./Shred)
-- **Search** We’ve introduced two variants for Search inputs, including an attached-button style. This initial version doesn’t include support for more robust functionality like autocomplete, but we think it’s a good start. (Joe J./Shred)
-- **Links** Say goodbye to underlines! This is one of our most requested changes, and we’ve finally reached an accessible solution. With the update to our body copy color, our standard links no longer require another affordance. (Shred)
-- **Styled HTML** This month, we’ve added styling for pre-formatted text (pre), description lists (dl), and detail disclosures (details/summary). If you’re unfamiliar with any of these elements, I highly recommend you check out our examples in the docs! (Shred)
-
-
-
-## ⚒️ Infrastructure
-
-
-
-- **CI Changes** transitioned away away from TravisCI in favor of GitHub actions!
-- **Continuous Deployment** We are now automagically deploying previews when a pull request is opened. The deployment (or preview) is re-deployed every time a commit is pushed to the open pull request. Additionally, a [slack channel](https://okta.slack.com/archives/C01BF6S2LNB) has been created which posts messages when new previews are deployed! (Arnie)
-
-
-
-
diff --git a/packages/.archived/docs/updates/index.md b/packages/.archived/docs/updates/index.md
deleted file mode 100644
index 81f812cf32..0000000000
--- a/packages/.archived/docs/updates/index.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-template: plain
-title: Odyssey Updates
-headline: Updates
-lede: Here is a list of all our most recent updates. These can vary from component changes to team updates and contributions.
-description: Here is a list of all our most recent updates. These can vary from component changes to team updates and contributions.
-links:
- - icon: github
- label: Changelog
- href: https://github.com/okta/odyssey/blob/master/packages/odyssey/src/scss/components/_text-input.scss
----
-
-## 2020
-
-
-
-- [October 2, 2020 - v0.6.0](https://github.com/okta/odyssey/releases/tag/%40okta%2Fodyssey_0.6.0)
-- [September 18, 2020 - v0.5.1](https://github.com/okta/odyssey/releases/tag/%40okta%2Fodyssey_0.5.1)
-- [September 3, 2020 - v0.5.0](https://github.com/okta/odyssey/releases/tag/%40okta%2Fodyssey_0.5.0)
-- [August 5, 2020 - v0.4.0](https://github.com/okta/odyssey/releases/tag/%40okta%2Fodyssey_0.4.0)
-- [June 25, 2020 - v0.3.0](https://github.com/okta/odyssey/releases/tag/%40okta%2Fodyssey_0.3.0)
-- [April 30, 2020 - v0.2.0](https://github.com/okta/odyssey/releases/tag/%40okta%2Fodyssey_0.2.0)
-- [April 20, 2020 - v0.1.3](https://github.com/okta/odyssey/releases/tag/%40okta%2Fodyssey_0.1.3)
-- [April 6, 2020 - v0.1.2](https://github.com/okta/odyssey/releases/tag/%40okta%2Fodyssey_0.1.2)
-- [April 3, 2020 - v0.1.1](https://github.com/okta/odyssey/releases/tag/%40okta%2Fodyssey_0.1.1)
-
-
-
-## 2019
-
-
-
-- [October 10, 2019 - v0.0.1](https://github.com/okta/odyssey/releases/tag/odyssey-0.0.1)
-- [April 25, 2019 - v0.0.0](https://github.com/okta/odyssey/releases/tag/0.0.0)
-
-
diff --git a/packages/odyssey-react/.postcssrc.cjs b/packages/odyssey-react/.postcssrc.cjs
index c98dc42c87..944ee3fb33 100644
--- a/packages/odyssey-react/.postcssrc.cjs
+++ b/packages/odyssey-react/.postcssrc.cjs
@@ -34,7 +34,7 @@ module.exports = (ctx) => {
);
const partials = `functions colors mixins tokens`.split(" ");
- const importDir = resolve(require.resolve("@okta/odyssey"), "../abstracts");
+ const importDir = resolve(__dirname, "src/scss/abstracts");
const importData = partials
.map((partial) => `@import '${importDir}/${partial}';`)
.join("\n");
diff --git a/packages/odyssey/src/scss/abstracts/_colors.scss b/packages/odyssey-react/src/scss/abstracts/_colors.scss
similarity index 100%
rename from packages/odyssey/src/scss/abstracts/_colors.scss
rename to packages/odyssey-react/src/scss/abstracts/_colors.scss
diff --git a/packages/odyssey/src/scss/abstracts/_functions.scss b/packages/odyssey-react/src/scss/abstracts/_functions.scss
similarity index 100%
rename from packages/odyssey/src/scss/abstracts/_functions.scss
rename to packages/odyssey-react/src/scss/abstracts/_functions.scss
diff --git a/packages/odyssey/src/scss/abstracts/_mixins.scss b/packages/odyssey-react/src/scss/abstracts/_mixins.scss
similarity index 94%
rename from packages/odyssey/src/scss/abstracts/_mixins.scss
rename to packages/odyssey-react/src/scss/abstracts/_mixins.scss
index f5b5a3f2d4..b3d321acd6 100644
--- a/packages/odyssey/src/scss/abstracts/_mixins.scss
+++ b/packages/odyssey-react/src/scss/abstracts/_mixins.scss
@@ -83,6 +83,7 @@
font-size: $size-body-base;
line-height: $base-line-height;
+ /* stylelint-disable selector-class-pattern */
&:hover,
&:focus,
&.is-ods-input-hover,
@@ -94,6 +95,7 @@
&.is-ods-input-focus {
@include outline;
}
+ /* stylelint-enable selector-class-pattern */
&:disabled {
opacity: 1;
@@ -111,6 +113,7 @@
}
}
+ /* stylelint-disable selector-class-pattern */
&:invalid,
&.is-ods-input-invalid {
border-color: $color-danger-base;
@@ -119,6 +122,7 @@
@include outline($focus-ring-danger);
}
}
+ /* stylelint-enable selector-class-pattern */
&::placeholder {
color: $text-sub;
diff --git a/packages/odyssey/src/scss/abstracts/_tokens.scss b/packages/odyssey-react/src/scss/abstracts/_tokens.scss
similarity index 100%
rename from packages/odyssey/src/scss/abstracts/_tokens.scss
rename to packages/odyssey-react/src/scss/abstracts/_tokens.scss
diff --git a/packages/odyssey/CHANGELOG.md b/packages/odyssey/CHANGELOG.md
deleted file mode 100644
index 383adb124b..0000000000
--- a/packages/odyssey/CHANGELOG.md
+++ /dev/null
@@ -1,270 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [0.11.0](https://github.com/okta/odyssey/compare/v0.10.0...v0.11.0) (2022-03-17)
-
-**Note:** Version bump only for package @okta/odyssey
-
-## [0.10.0](https://github.com/okta/odyssey/compare/v0.9.3...v0.10.0) (2022-03-03)
-
-**Note:** Version bump only for package @okta/odyssey
-
-### [0.9.3](https://github.com/okta/odyssey/compare/v0.9.2...v0.9.3) (2022-02-24)
-
-**Note:** Version bump only for package @okta/odyssey
-
-### [0.9.2](https://github.com/okta/odyssey/compare/v0.9.1...v0.9.2) (2022-02-17)
-
-**Note:** Version bump only for package @okta/odyssey
-
-### [0.9.1](https://github.com/okta/odyssey/compare/v0.9.0...v0.9.1) (2022-02-10)
-
-**Note:** Version bump only for package @okta/odyssey
-
-## [0.9.0](https://github.com/okta/odyssey/compare/v0.8.4...v0.9.0) (2022-02-02)
-
-### ⚠ BREAKING CHANGES
-
-- **odyssey:** renames "title" variables to "heading"
-
-### Code Refactoring
-
-- **odyssey:** renames "title" variables to "heading" ([622d4ec](https://github.com/okta/odyssey/commit/622d4ec8c3f17f524ae44635c141ead54093d4dc))
-
-### [0.8.4](https://github.com/okta/odyssey/compare/v0.8.3...v0.8.4) (2021-11-18)
-
-**Note:** Version bump only for package @okta/odyssey
-
-## [0.8.3](https://github.com/okta/odyssey/compare/v0.8.2...v0.8.3) (2021-11-10)
-
-**Note:** Version bump only for package @okta/odyssey
-
-## [0.7.0] - 2020-11-18
-
-### Added
-
-- ESLint has been added to our test suite
-- Turquoise 400 has been added to the color map
-- Links: added support for Links with Icons
-- dfn: styling and minor guidance for the HTML element
-- figure/figcaption: styling and minor guidance for the HTML element
-- output: styling and minor guidance for the HTML element
-- q: styling and minor guidance for the HTML element
-- samp: styling and minor guidance for the HTML element
-- `vuepress-theme-odyssey` is a new private package containing our brand new docs theme
-- adds `prism-theme-odyssey` package for styling code blocks
-- [Docs] Field Labels: replaces Form documentation and guidelines
-
-### Changed
-
-- Incosolata is now the default monospace font for Odyssey
-- External link indicator updated
-- [Breaking Change] Modal: `z-index` has been updated from `1` to `10`
-- Tabs: now uses 16px base font instead of 14px
-- Tabs: Border now lives on the tablist, rather than the tabpanel
-- Tabs: `tabpanel` padding updated to match the design
-- Tabs: removed unnecessary `z-index` declaration
-- Tag: `tag--list` now inline-block by default
-- Tag: Background color updated to Gray 100
-- Toast/Modal: Close UI indicator updated to use variant from odyssey-icons
-- [Docs] Content and examples for all components have been rewritten
-
-### Removed
-
-- Tabs: unused CSS custom properties that were used for moving tab indicator implementation have been removed
-- `vuepress-theme-nimatron` has been removed in favor of `vuepress-theme-odyssey`
-- [Docs] Form docs have been removed in favor of Field Labels
-
-### Fixed
-
-- Tables and Table wrappers now correctly remove margin if they are the last or only child
-
-## [0.6.0] - 2020-10-02
-
-### Added
-
-- Toast: a transient messaging component
-- Icons: Caution, Copy, Filter, and Error icons are now available
-- Standalone Search: added a new Text Input variant for search UI
-- Green-600: added as an a11y-compliant background color
-- details/summary: styling and minor guidance for the HTML elements
-- dl/dt/dd: styling and minor guidance for the HTML elements
-- pre: styling and minor guidance for the HTML element
-
-### Changed
-
-- Gray-900 updated to #1d1d21; all relevant variables/tokens updated
-- Links no longer require an underline; new Gray-900 contrast allows for this
-- Icons: the Complete icon has been updated to differentiate it from a plain check
-
-### Removed
-
-- [Docs] Extraneous doc styles for deprecated samples have been removed
-
-## [0.5.1] - 2020-09-18
-
-### Added
-
-- [Docs] Added missing guidance for accessible SVG icon use in Buttons
-
-### Changed
-
-- [Docs] Field warnings no longer display an "alert" icon as part of invalid messaging guidance
-
-### Fixed
-
-- [Docs] Type token examples now display correctly
-- [Docs] `title` displays correctly once more ("Odyssey Design System")
-- [Docs] VuePress no longer modifies outbound links automatically
-
-## [0.5.0] - 2020-09-03
-
-### Added
-
-- [Docs] Iconography documentation, available at /base/iconography
-- Basic styles for inline Icon display
-- Multi-Select variant for Select (both Choices.js and HTML-only)
-- Button w/ Icon variant has been added to Button
-- Blue, 400 is now available for use via Sass maps (no Token)
-- Gray, 500 is now available for use via Sass maps (no Token)
-
-### Changed
-
-- [Docs] Type documentation is now titled "Typography" and located at /base/typography
-- [Docs] Documentation now references this CHANGELOG on GH directly rather than copying over
-- [Docs] Color documentation has been revamped entirely
-- [Docs] Documentation sorts now utilizes Vuepress slots for future-friendliness
-- Recommended Choices.js configuration updated (non-breaking)
-- SVGO configuration no longer sorts attributes, now adds `.ods-icon`
-- [Breaking Change] "info", "back", and "forward" icons have been renamed to "get-info", "go-backward", and "go-forward"
-- `$border-color-ui` is now a11y-compliant, utilizes Gray, 500
-- `blockquote`, Form, Table, and Tab borders now use `$border-color-display` as they are not a11y-constrained
-
-### Removed
-
-- [Docs] Type test page has been removed from docs
-- [Breaking Change] Grays 300 and 400 have been removed from available use
-
-### Fixed
-
-- [Docs] Modal examples now work as intended
-- [Docs] `address` example now renders correctly
-- All Icons now use a 14px grid instead of 24px for optimal display
-
-## [0.4.0] - 2020-08-05
-
-### Added
-
-- `@okta/odyssey-icons` package: includes an initial set of SVGs and process for batch optimizing via `svgo`
-
-### Changed
-
-- Changed the Odyssey documentation platform from `hexo` to `vuepress`
-- The documentation theme is now sourced via the private `@okta/vuepress-theme-nimatron` package
-- `.gitignore` now includes the auto-generated `CHANGELOG` to avoid creating duplicate files
-- `:disabled` and `:read-only` labels now share text and border styling
-- Tab indicators no longer animate via CSS vars
-
-### Removed
-
-- [Breaking Change] `$border-default` token has been removed
-- `:visited` link styling has been removed for user privacy
-
-### Fixed
-
-- Buttons labels no longer wrap (`white-spacing: nowrap`)
-
-## [0.3.0] - 2020-06-25
-
-### Added
-
-- Design Tokens
-
-### Changed
-
-- Color, type and spacing to reflect rebrand
-- [Breaking Change] `_variables.scss` has been renamed to `_tokens.scss`, this introduces design tokens into Odyssey
-- [Breaking Change] Renamed "warning" to "orange"
-- [Breaking Change] Changed spacing variables (tokens) to use t-shirt sizing as well as new values
-- [Breaking Change] Changed typography, font family. Now refers to "headings" as titles throughout
-- [Breaking Change] Change semantic `cv` arguments (lightest, base, dark) in favor of 000-900
-
-### Removed
-
-- [Breaking Change] Removed colors: magenta, grays 100, 300, 500, 700, 900
-- [Breaking Change] Removed `fauxpacity` function, preferring "light" color variants
-- [Breaking Change] Removed documentation and Sass styles for unapproved components: Banner, Callout, Card, Dropdown, Meter, Navigation, Switch, Toast, Top Bar
-- Removed all other unused/unapproved documentation
-
-## [0.2.0] - 2020-04-30
-
-### Added
-
-- Status: New component and documentation
-- Tab: New component and documentation
-- Tag: New component and documentation
-
-### Changed
-
-- [Breaking Change] Rename `yellow` color variable to `caution`
-- All focus outline instances now use new outline mixin
-- Adds Status content type to Table component
-- [Docs] Fix misspelling in Form documentation
-- [Docs] Rename "Foundation" to "Base" in nav
-
-## [0.1.3] - 2020-04-20
-
-### Added
-
-- Styled HTML Elements `abbr`, `address`, `code`, `kbd`, `hr` and `var`
-- Update all HTML element examples
-
-### Changed
-
-### Added
-
-- Styled HTML Elements `abbr`, `address`, `code`, `kbd`, `hr` and `var`
-- Update all HTML element examples
-
-### Changed
-
-- bugfix/ee-463 - fixes table cell overflow by wrapping long strings
-- [Docs] Rename "Building Blocks" section to "Foundations"
-
-## [0.1.2] - 2020-04-06
-
-### Added
-
-- [Docs] Changelog
-
-### Changed
-
-- [Docs] Heading casing changed to sentence throughout docs
-
-## [0.1.1] - 2020-04-01
-
-### Added
-
-- Table: styling and documentation for default table behavior, sorting, and various content types
-- Select: support for default select input behavior via plain HTML and Choices.js
-- Styled Element Glossary: `blockquote`, `cite`, `del`, `em`, `ins`, `mark`, `s`, `small`, `sub`, `sup`, `strong`
-- [Docs] Component Status Page
-- [Docs] Code of Conduct
-
-### Changed
-
-- [Breaking Change] All classes are now prefixed with `.ods-`
-- Standard borders are now set to 1px (from 2px)
-- Input and Button now share the same height math
-
-### Removed
-
-- [Docs] Removed documentation for multiple items not yet ready for public use: Banner, Callout, Card, Dropdown, Iconography, Meter, Navigation, Switch, Toast, Top Bar, Layouts
-
-## [0.0.1] - 2019-10-10
-
-### Added/Changed/Removed
-
-- Migrated former "Nim" repo into Odyssey
diff --git a/packages/odyssey/README.md b/packages/odyssey/README.md
deleted file mode 100644
index 6a38994fe0..0000000000
--- a/packages/odyssey/README.md
+++ /dev/null
@@ -1,53 +0,0 @@
-# @okta/odyssey
-
-This package provides the necessary SCSS and fonts to utilize Odyssey, Okta's design system.
-
-For guidance on how and when to implement individual components, please see our online docs .
-
-## What's included
-
-`dist/odyssey.css` - A precompiled version of Odyssey for those who don't need the benefits of Sass.
-
-`src/scss` - The SCSS source files for Odyssey, ready to be `@import`'d into your project.
-
-`src/scss/odyssey.scss` - The main compilation sheet for Odyssey.
-
-## Getting started
-
-### Install Odyssey
-
-Using yarn:
-
-`$ yarn add @okta/odyssey`
-
-If you prefer npm, use the following command instead:
-
-`$ npm install --save @okta/odyssey`
-
-### SCSS
-
-Usage of the Odyssey Sass files assumes the use of a SCSS pre-processor. All Sass files use the `*.scss` file extension and syntax.
-
-#### Autoprefixer
-
-Make sure your asset pipeline utilizes autoprefixer to ensure vendor prefixes are automatically added to your compiled CSS.
-
-#### Importing SCSS files
-
-To add a Odyssey to your build, import the compilation sheet directly.
-
-```scss
-@import "node_modules/odyssey/src/scss/odyssey";
-```
-
-This will import all functions, mixins, abstracts, components, and layouts into your build.
-
-If you are looking for a more limited selection, you can also import select components, etc individually.
-
-## Contributing
-
-### Linting
-
-Odyssey utilizes stylelint for our live linting as well as our lint tests.
-
-You can check the current syntax rule configuration in `stylelint.json`.
diff --git a/packages/odyssey/package.json b/packages/odyssey/package.json
deleted file mode 100644
index 7f6df2b5e8..0000000000
--- a/packages/odyssey/package.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
- "name": "@okta/odyssey",
- "private": true,
- "version": "0.11.0",
- "description": "Okta's design system",
- "author": "Okta, Inc.",
- "license": "Apache-2.0",
- "files": [
- "dist",
- "src/scss"
- ],
- "main": "src/scss/odyssey.scss",
- "style": "src/scss/odyssey.scss",
- "scripts": {
- "build": "sass src/scss/odyssey.scss dist/odyssey.css"
- },
- "devDependencies": {
- "sass": "^1.42.1"
- }
-}
diff --git a/packages/odyssey/src/scss/base/_accessibility.scss b/packages/odyssey/src/scss/base/_accessibility.scss
deleted file mode 100644
index 0add67ddee..0000000000
--- a/packages/odyssey/src/scss/base/_accessibility.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-// Rem-based modular scale for type
-// Not ready for general use.
-
-// Visually Hidden - use this for text that should be hidden from sighted
-// users, but available to ATs.
-
-.u-visually-hidden {
- @include is-visually-hidden;
-}
diff --git a/packages/odyssey/src/scss/base/_iconography.scss b/packages/odyssey/src/scss/base/_iconography.scss
deleted file mode 100644
index 76992ef495..0000000000
--- a/packages/odyssey/src/scss/base/_iconography.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-icon {
- position: relative;
- inset-block-start: -0.05em;
- width: 1em;
- height: 1em;
- vertical-align: middle;
-
- // Prelim RTL styles
- .ods-rtl & {
- order: 1;
- }
-}
diff --git a/packages/odyssey/src/scss/base/_reset.scss b/packages/odyssey/src/scss/base/_reset.scss
deleted file mode 100644
index eda2bd8386..0000000000
--- a/packages/odyssey/src/scss/base/_reset.scss
+++ /dev/null
@@ -1,165 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-// Catch-all border-box bad boy
-
-* {
- box-sizing: border-box;
-
- &::before,
- &::after {
- box-sizing: inherit;
- }
-}
-
-// Huge selector list layout reset
-
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
- margin-block: 0;
- margin-inline: 0;
- padding-block: 0;
- padding-inline: 0;
- border: 0;
- font: inherit;
- font-size: 100%;
- vertical-align: baseline;
-}
-
-button,
-input {
- font: inherit;
- font-size: 100%;
-}
-
-// HTML5 display-role reset for older browsers
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
- display: block;
-}
-
-// Element Specific Resets
-
-img,
-svg {
- max-width: 100%;
-}
-
-ol,
-ul {
- list-style: none;
-}
-
-blockquote,
-q {
- quotes: none;
-
- &::before,
- &::after {
- content: "";
- content: none;
- }
-}
-
-table {
- border-spacing: 0;
- border-collapse: collapse;
-}
diff --git a/packages/odyssey/src/scss/base/_typography-global.scss b/packages/odyssey/src/scss/base/_typography-global.scss
deleted file mode 100644
index 10e4da03a1..0000000000
--- a/packages/odyssey/src/scss/base/_typography-global.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-@use "sass:math";
-
-html {
- font-size: math.div($base-font-size, 16px) * 100%; // converts px value to % of browser default
-}
-
-body {
- color: $text-body;
- font-family: $body-font-family;
- font-style: normal;
- font-weight: 400;
- letter-spacing: 0;
- line-height: $base-line-height;
- font-feature-settings: "lnum", "pnum";
- text-decoration-skip-ink: all;
-}
diff --git a/packages/odyssey/src/scss/base/_typography-header.scss b/packages/odyssey/src/scss/base/_typography-header.scss
deleted file mode 100644
index 2c9f656315..0000000000
--- a/packages/odyssey/src/scss/base/_typography-header.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.ods-title {
- margin-block-start: 0;
- margin-block-end: $spacing-xs-em;
- margin-inline: 0;
- color: $text-heading;
- font-weight: 600;
-}
-
-h1,
-.is-ods-title-1,
-h2,
-.is-ods-title-2,
-h3,
-.is-ods-title-3 {
- line-height: $title-line-height;
-}
-
-h4,
-.is-ods-title-4,
-h5,
-.is-ods-title-5,
-h6,
-.is-ods-title-6 {
- line-height: $base-line-height;
-}
-
-h1,
-.is-ods-title-1 {
- font-size: $size-title-1;
-}
-
-h2,
-.is-ods-title-2 {
- font-size: $size-title-2;
-}
-
-h3,
-.is-ods-title-3 {
- font-size: $size-title-3;
-}
-
-h4,
-.is-ods-title-4 {
- font-size: $size-title-4;
-}
-
-h5,
-.is-ods-title-5 {
- font-size: $size-title-5;
-}
-
-h6,
-.is-ods-title-6 {
- font-size: $size-title-6;
-}
-
-.legalese {
- color: $text-sub;
- font-size: $size-body-caption;
-}
diff --git a/packages/odyssey/src/scss/base/_typography-link.scss b/packages/odyssey/src/scss/base/_typography-link.scss
deleted file mode 100644
index 50c76b9eb9..0000000000
--- a/packages/odyssey/src/scss/base/_typography-link.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-a {
- color: cv("blue", "500");
- text-decoration: none;
-
- &:hover {
- color: cv("blue", "500");
- text-decoration: underline;
- }
-
- &:visited {
- color: cv("blue", "500");
- }
-
- /* stylelint-disable selector-no-qualifying-type */
- &[target="_blank"]:not([href^="mailto:"])::after {
- content: "";
- display: inline-block;
- position: relative;
- inset-block-start: -0.1em;
- width: 1em;
- height: 1em;
- margin-inline-start: 0.2em;
- background-image: get-icon("external", $color-primary-base);
- background-repeat: no-repeat;
- vertical-align: middle;
- }
-
- /* stylelint-enable */
-}
-
-.ods-link--has-icon {
- display: inline-grid;
- grid-auto-columns: minmax(min-content, max-content);
- grid-auto-flow: column;
- grid-gap: $spacing-xs;
- align-items: center;
-}
diff --git a/packages/odyssey/src/scss/base/_typography-list.scss b/packages/odyssey/src/scss/base/_typography-list.scss
deleted file mode 100644
index 7972826ec7..0000000000
--- a/packages/odyssey/src/scss/base/_typography-list.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-ol,
-ul {
- &:not([class]) {
- max-width: $max-line-length;
- margin-block-start: 0;
- margin-block-end: $type-margin;
- margin-inline: 0;
- padding-block: 0;
- padding-inline-start: $spacing-m;
- padding-inline-end: 0;
- list-style-position: outside;
-
- li {
- &:last-child {
- margin-block-end: 0;
- }
- }
-
- &:last-child {
- margin-block-end: 0;
- }
- }
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-ul:not([class]) {
- list-style-type: disc;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-ol:not([class]) {
- list-style-type: decimal;
-}
-
-dl:not([class]) {
- display: grid;
- grid-gap: $spacing-xs $spacing-m;
- grid-template-columns: repeat(2, minmax(min-content, max-content));
- max-width: $max-line-length;
- margin-block-start: 0;
- margin-block-end: $type-margin;
- margin-inline: 0;
- padding-block: 0;
- padding-inline: 0;
-
- &:last-child {
- margin-block-end: 0;
- }
-
- dt {
- grid-column: 1/1;
- font-weight: 600;
- }
-
- dd {
- grid-column: 2/2;
- font-weight: 400;
- }
-}
diff --git a/packages/odyssey/src/scss/base/_typography-text.scss b/packages/odyssey/src/scss/base/_typography-text.scss
deleted file mode 100644
index 0c58102942..0000000000
--- a/packages/odyssey/src/scss/base/_typography-text.scss
+++ /dev/null
@@ -1,238 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-abbr {
- border-block-end: 1px dashed $color-primary-dark;
- text-decoration: none;
-}
-
-address {
- max-width: $max-line-length;
- margin-block-start: 0;
- margin-block-end: $type-margin;
- margin-inline: 0;
-
- &:last-child {
- margin-block-end: 0;
- }
-}
-
-em {
- font-style: italic;
-
- > em {
- text-decoration: underline;
- }
-}
-
-strong {
- font-weight: 600;
-
- > strong {
- text-decoration: underline;
- }
-}
-
-sup {
- font-size: ms(-2);
- line-height: 1;
- vertical-align: super;
-}
-
-sub {
- font-size: ms(-2);
- line-height: 1;
- vertical-align: sub;
-}
-
-blockquote {
- max-width: $max-line-length;
- margin-block-start: 0;
- margin-block-end: $type-margin;
- margin-inline: 0;
- padding-block: 0;
- padding-inline-end: 0;
- padding-inline-start: $spacing-s;
- border-inline-start: 3px solid $border-color-display;
-
- &:last-child {
- margin-block-end: 0;
- }
-}
-
-p {
- max-width: $max-line-length;
- margin-block-start: 0;
- margin-block-end: $type-margin;
- margin-inline: 0;
-
- details & {
- font-size: ms(0);
- }
-
- &:last-child {
- margin-block-end: 0;
- }
-}
-
-pre {
- margin-block-start: 0;
- margin-block-end: $type-margin;
- margin-inline: 0;
- font-family: $mono-font-family;
- white-space: pre-wrap;
- tab-size: 2;
-
- &:last-child {
- margin-block-end: 0;
- }
-}
-
-cite {
- font-style: italic;
-}
-
-del {
- display: inline-block;
- background: $color-danger-light;
-}
-
-del::before,
-del::after {
- @include is-visually-hidden;
-}
-
-del::before {
- content: attr(data-a11y-start);
-}
-
-del::after {
- content: attr(data-a11y-end);
-}
-
-dfn {
- font-style: italic;
-}
-
-figure:not([class]) {
- display: grid;
- grid-gap: $spacing-s;
- grid-template-columns: minmax(min-content, max-content);
- justify-content: center;
- justify-items: center;
-
- figcaption:not([class]) {
- color: $text-sub;
- font-size: ms(0);
- }
-}
-
-ins {
- display: inline-block;
- background: cv("green", "000");
-}
-
-ins::before,
-ins::after {
- @include is-visually-hidden;
-}
-
-ins::before {
- content: attr(data-a11y-start);
-}
-
-ins::after {
- content: attr(data-a11y-end);
-}
-
-kbd {
- @include border-radius($base-border-radius);
-
- display: inline-block;
- padding-block: 0;
- padding-inline: $spacing-xs;
- border: 1px solid cv("gray", "200");
- background: cv("gray", "000");
- box-shadow: 0 2px 0 cv("gray", "000"), 0 3px 0 cv("gray", "200");
- font-weight: 400;
- line-height: $title-line-height;
-}
-
-mark {
- background: cv("yellow", "000");
-}
-
-q {
- quotes: '"' '"' "'" "'";
-
- &::before {
- content: open-quote;
- }
-
- &::after {
- content: close-quote;
- }
-}
-
-s {
- text-decoration: line-through;
-}
-
-samp {
- padding-block: 0;
- padding-inline: 0.5ch;
- background-color: cv("gray", "000");
- box-shadow: 0 1px 0 cv("gray", "200");
- font-family: $mono-font-family;
- font-size: ms(0);
-
- kbd {
- background: $white;
- }
-}
-
-small {
- font-size: $size-body-caption;
-}
-
-details {
- font-size: ms(0);
-}
-
-summary {
- @include border-radius($base-border-radius);
-
- font-size: ms(1);
- font-weight: 600;
- cursor: default;
-
- &:focus {
- @include outline;
- }
-}
-
-hr {
- margin-block: $spacing-s;
- margin-inline: 0;
- border-width: 1px;
- border-style: solid;
- border-color: cv("gray", "200");
-}
-
-code {
- font-family: $mono-font-family;
-}
-
-var {
- font-style: italic;
- font-weight: 600;
-}
diff --git a/packages/odyssey/src/scss/base/_typography.scss b/packages/odyssey/src/scss/base/_typography.scss
deleted file mode 100644
index 3474612892..0000000000
--- a/packages/odyssey/src/scss/base/_typography.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-@import "./typography-global";
-@import "./typography-link";
-@import "./typography-text";
-@import "./typography-list";
-@import "./typography-header";
diff --git a/packages/odyssey/src/scss/components/_banner.scss b/packages/odyssey/src/scss/components/_banner.scss
deleted file mode 100644
index 819ab069ff..0000000000
--- a/packages/odyssey/src/scss/components/_banner.scss
+++ /dev/null
@@ -1,149 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-banner {
- display: grid;
- position: relative;
- grid-template-areas: "icon title content actions";
- grid-template-columns: repeat(4, minmax(min-content, max-content));
- grid-template-rows: 1fr;
- align-items: center;
- justify-content: center;
- width: 100%;
- padding-block: $spacing-s;
- padding-inline: $spacing-m;
- background-color: cv("blue", "300");
-
- &.is-ods-banner-dismissed {
- display: none;
- }
-
- a {
- text-decoration: underline;
- }
-}
-
-.is-ods-banner-dismissable {
- padding-block: $spacing-s;
- padding-inline-start: $spacing-m;
- padding-inline-end: $spacing-l;
-}
-
-.ods-banner--icon {
- grid-area: icon;
- margin-inline-end: $spacing-s;
- font-size: $size-title-5;
- line-height: 1;
-}
-
-.ods-banner--title {
- grid-area: title;
- margin-block-end: 0;
- margin-inline-end: $spacing-xs;
- font-size: $size-title-6;
-}
-
-.ods-banner--content {
- grid-area: content;
- max-width: 100%;
- margin-block-end: 0;
- margin-inline-end: $spacing-m;
-}
-
-.ods-banner--actions {
- display: flex;
- grid-area: actions;
- justify-content: end;
-}
-
-.ods-banner--dismiss {
- position: absolute;
- inset-block-start: 50%;
- inset-inline-end: $spacing-m;
- margin-inline-start: $spacing-m;
- transform: translateY(-50%);
-}
-
-.is-ods-banner-info {
- background-color: cv("blue", "300");
- color: $text-body;
-
- .ods-banner--title {
- color: $text-body;
- }
-
- a {
- color: $text-body;
- }
-}
-
-.is-ods-banner-success {
- background-color: cv("green", "300");
- color: $text-body;
-
- .ods-banner--title {
- color: $text-body;
- }
-
- a {
- color: $text-body;
- }
-}
-
-.is-ods-banner-caution {
- background-color: cv("yellow", "300");
- color: $text-body;
-
- .ods-banner--title {
- color: $text-body;
- }
-
- a {
- color: $text-body;
- }
-}
-
-.is-ods-banner-danger {
- background-color: cv("red", "300");
- color: $text-body;
-
- .ods-banner--title {
- color: $text-body;
- }
-
- a {
- color: $text-body;
- }
-}
-
-@media screen and (max-width: ($max-line-length * 1.5)) {
- .ods-banner {
- grid-template-areas: initial;
- grid-template-columns: repeat(2, minmax(min-content, max-content));
- grid-template-rows: unset;
- justify-content: start;
- justify-items: start;
- }
-
- .ods-banner--icon,
- .ods-banner--title,
- .ods-banner--content,
- .ods-banner--actions {
- grid-area: initial;
- }
-
- .ods-banner--title,
- .ods-banner--content,
- .ods-banner--actions {
- grid-column: 2;
- }
-}
diff --git a/packages/odyssey/src/scss/components/_button-context.scss b/packages/odyssey/src/scss/components/_button-context.scss
deleted file mode 100644
index a4556534c4..0000000000
--- a/packages/odyssey/src/scss/components/_button-context.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-table {
- .ods-button {
- @extend %button-small;
- }
-}
-
-.ods-form--header {
- .ods-button {
- @extend %button-small;
- }
-
- .ods-form:not([data-readonly]) & {
- .ods-button {
- display: none;
- }
- }
-}
diff --git a/packages/odyssey/src/scss/components/_button-layout.scss b/packages/odyssey/src/scss/components/_button-layout.scss
deleted file mode 100644
index b0a80bf308..0000000000
--- a/packages/odyssey/src/scss/components/_button-layout.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-/* stylelint-disable-next-line no-descending-specificity */
-.ods-button {
- & + & {
- margin-inline-start: $spacing-s;
- }
-
- &.is-ods-button-full-width {
- margin-block: 0;
- margin-inline: 0;
-
- &:not(:last-child) {
- margin-block-end: $spacing-s;
- }
- }
-}
diff --git a/packages/odyssey/src/scss/components/_button.scss b/packages/odyssey/src/scss/components/_button.scss
deleted file mode 100644
index 6b30567676..0000000000
--- a/packages/odyssey/src/scss/components/_button.scss
+++ /dev/null
@@ -1,197 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-button {
- @include border-radius($base-border-radius);
-
- display: inline-block;
- position: relative;
- margin-block: 0;
- margin-inline: 0;
- padding-block: $spacing-xs-em;
- padding-inline: $spacing-s-em;
- transition-property: color, background-color, border-color, box-shadow;
- transition-duration: 100ms;
- transition-timing-function: linear;
- border: 1px solid transparent;
- background-color: $color-primary-base;
- box-shadow: 0 0 0 0 $color-primary-light;
- color: $white;
- font-family: $body-font-family;
- font-size: ms(0);
- font-weight: 600;
- line-height: $base-line-height;
- white-space: nowrap;
-
- &:hover,
- &.is-ods-button-hover {
- border-color: $color-primary-dark;
- background-color: $color-primary-dark;
- }
-
- &:focus,
- &.is-ods-button-focus {
- @include outline;
-
- background-color: $color-primary-dark;
- }
-
- &:disabled {
- border-color: transparent;
- background-color: $color-primary-light;
- cursor: not-allowed;
- }
-}
-
-.ods-button--label {
- display: inline-block;
- min-width: $spacing-l-em;
-
- &:not(:only-child) {
- margin-inline-start: $spacing-xs;
- }
-}
-
-.is-ods-button-secondary {
- border-color: $color-primary-base;
- background-color: $white;
- color: $color-primary-base;
-
- &:hover,
- &.is-ods-button-hover {
- border-color: $color-primary-base;
- background-color: $color-primary-base;
- color: $white;
- }
-
- &:focus,
- &.is-ods-button-focus {
- border-color: $color-primary-base;
- background-color: $white;
- color: $color-primary-base;
- }
-
- &:disabled {
- border-color: $color-primary-light;
- background-color: $white;
- color: $color-primary-light;
- }
-}
-
-.is-ods-button-danger {
- background-color: $color-danger-base;
-
- &:hover,
- &.is-ods-button-hover {
- border-color: $color-danger-dark;
- background-color: $color-danger-dark;
- }
-
- &:focus,
- &.is-ods-button-focus {
- @include outline($focus-ring-danger);
-
- background-color: $color-danger-dark;
- }
-
- &:disabled {
- border-color: $color-danger-light;
- background-color: $color-danger-light;
- }
-
- &.is-ods-button-secondary {
- border-color: $color-danger-base;
- background-color: $white;
- color: $color-danger-base;
-
- &:focus,
- &.is-ods-button-focus {
- border-color: $color-danger-dark;
- background-color: $color-danger-light;
- color: $color-danger-dark;
- }
-
- &:disabled {
- border-color: $color-danger-light;
- background-color: $white;
- color: $color-danger-light;
- }
- }
-}
-
-.is-ods-button-dismiss {
- padding-block: ($spacing-xs-em * 0.5);
- padding-inline: ($spacing-xs-em * 0.5);
- border: 0;
- background-color: transparent;
- color: inherit;
- line-height: 1;
-
- &:hover,
- &.is-ods-button-hover {
- border-color: transparent;
- background-color: transparentize($white, 0.6);
- }
-
- &:focus,
- &.is-ods-button-focus {
- background-color: transparentize($white, 0.6);
- box-shadow: 0 0 0 2px;
- }
-
- &:disabled {
- background-color: transparentize(cv("gray", "100"), 0.6);
- color: cv("gray", "600");
- }
-}
-
-.is-ods-button-clear {
- background-color: transparent;
- color: $color-primary-base;
-
- &:hover,
- &.is-ods-button-hover {
- border-color: transparent;
- background-color: cv("blue", "000");
- color: $color-primary-dark;
- }
-
- &:focus,
- &.is-ods-button-focus {
- background-color: $white;
- color: $color-primary-base;
- }
-
- &:disabled {
- background-color: transparent;
- color: $color-primary-light;
- }
-}
-
-%button-small {
- font-size: ms(-1);
- line-height: $title-line-height;
-}
-
-.is-ods-button-size-s {
- @extend %button-small;
-}
-
-.is-ods-button-full-width {
- display: block;
- width: 100%;
-}
-
-.is-ods-button-size-l {
- padding-block: $spacing-s-em;
- padding-inline: $spacing-m-em;
-}
diff --git a/packages/odyssey/src/scss/components/_checkbox-context.scss b/packages/odyssey/src/scss/components/_checkbox-context.scss
deleted file mode 100644
index b0ffeaad48..0000000000
--- a/packages/odyssey/src/scss/components/_checkbox-context.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-table {
- .ods-checkbox--label {
- &:empty {
- height: calc(1em * #{$title-line-height});
- }
- }
-}
diff --git a/packages/odyssey/src/scss/components/_checkbox-layout.scss b/packages/odyssey/src/scss/components/_checkbox-layout.scss
deleted file mode 100644
index 94db5558dc..0000000000
--- a/packages/odyssey/src/scss/components/_checkbox-layout.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-checkbox--label {
- &:last-child {
- margin-block-end: 0;
- }
-}
diff --git a/packages/odyssey/src/scss/components/_checkbox.scss b/packages/odyssey/src/scss/components/_checkbox.scss
deleted file mode 100644
index 17c4ef2050..0000000000
--- a/packages/odyssey/src/scss/components/_checkbox.scss
+++ /dev/null
@@ -1,227 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-/* stylelint-disable no-descending-specificity, max-nesting-depth */
-
-.ods-checkbox {
- @include is-visually-hidden;
-
- &:checked,
- &:indeterminate {
- + .ods-checkbox--label {
- &::before {
- border-color: $color-primary-base;
- background-color: $color-primary-base;
- }
- }
- }
-
- &:checked {
- + .ods-checkbox--label {
- &::after {
- transform: translateY(-50%) scale(0.9);
- background-image: get-icon("check", $white);
- }
- }
- }
-
- &:not(:checked) {
- + .ods-checkbox--label {
- &:hover,
- &.is-ods-checkbox-hover {
- &::before {
- border-color: $color-primary-base;
- }
- }
- }
- }
-
- &:indeterminate,
- &.is-ods-checkbox-indeterminate {
- + .ods-checkbox--label {
- &::after {
- transform: translateY(-50%) scale(0.9);
- background-image: get-icon("dash", $white);
- }
- }
- }
-
- &:focus,
- &.is-ods-checkbox-focus {
- + .ods-checkbox--label {
- &::before {
- @include outline($focus-ring-primary, 2px);
-
- border-color: $color-primary-base;
- }
- }
- }
-
- &:disabled {
- + .ods-checkbox--label,
- + .ods-checkbox--label:hover {
- color: $text-body;
- cursor: not-allowed;
-
- &::before {
- border-color: $border-input-disabled;
- background-color: $bg-input-disabled;
- }
- }
-
- &:checked,
- &:indeterminate,
- &.is-ods-checkbox-indeterminate {
- + .ods-checkbox--label {
- &::before {
- border-color: $color-primary-light;
- background-color: $color-primary-light;
- }
- }
- }
-
- &:checked {
- + .ods-checkbox--label {
- &::after {
- background-image: get-icon("check", $white);
- }
- }
- }
-
- &:indeterminate,
- &.is-ods-checkbox-indeterminate {
- + .ods-checkbox--label {
- &::after {
- background-image: get-icon("dash", $white);
- }
- }
- }
- }
-
- &:invalid,
- &.is-ods-checkbox-invalid {
- + .ods-checkbox--label {
- color: $text-danger;
-
- &::before {
- border-color: $color-danger-base;
- }
- }
-
- &:checked,
- &:indeterminate {
- + .ods-checkbox--label {
- &::before {
- background-color: $color-danger-base;
- }
- }
- }
-
- &:not(:checked) {
- + .ods-checkbox--label {
- &:hover,
- &.is-ods-checkbox-hover {
- &::before {
- border-color: $color-danger-dark;
- }
- }
- }
- }
-
- &:focus {
- + .ods-checkbox--label {
- &::before {
- @include outline($focus-ring-danger, 2px);
-
- border-color: $color-danger-base;
- }
- }
- }
-
- &:disabled {
- + .ods-checkbox--label {
- color: $text-danger;
-
- &::before {
- border-color: $color-danger-light;
- }
- }
-
- &:checked {
- + .ods-checkbox--label {
- &::before {
- background-color: $color-danger-light;
- }
- }
- }
-
- &:checked,
- &:not(:checked),
- &:indeterminate {
- + .ods-checkbox--label {
- &::before {
- border-color: $color-danger-light;
- }
- }
- }
-
- &:indeterminate {
- + .ods-checkbox--label {
- &::after {
- background-image: get-icon("dash", $white);
- }
- }
- }
- }
- }
-}
-
-.ods-checkbox--label {
- display: block;
- position: relative;
- margin-block-end: $spacing-xs;
- padding-inline-start: 1em + $spacing-s-em;
- font-size: $size-body-base;
- font-weight: 400;
- text-align: start;
-
- &::before,
- &::after {
- @include border-radius($base-border-radius);
-
- content: "";
- display: block;
- position: absolute;
- inset-block-start: 50%;
- inset-inline-start: 0;
- width: 1em;
- height: 1em;
- transition-property: border-color, background, opacity, box-shadow;
- transition-duration: $base-duration;
- transition-timing-function: $base-timing;
- border: 2px solid transparent;
- }
-
- // Box
- &::before {
- transform: translateY(-50%);
- border-color: $border-color-ui;
- }
-
- // Check
- &::after {
- transform: translateY(-50%) scale(0.9);
- background-image: get-icon("check", transparent);
- background-repeat: no-repeat;
- background-position: center;
- }
-}
diff --git a/packages/odyssey/src/scss/components/_forms-context.scss b/packages/odyssey/src/scss/components/_forms-context.scss
deleted file mode 100644
index c1d3c5b280..0000000000
--- a/packages/odyssey/src/scss/components/_forms-context.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-modal {
- .ods-form {
- padding-block: 0;
- padding-inline: 0;
- border: 0;
- }
-
- .ods-form--header {
- @include is-visually-hidden;
- }
-}
diff --git a/packages/odyssey/src/scss/components/_forms.scss b/packages/odyssey/src/scss/components/_forms.scss
deleted file mode 100644
index 64a85b4775..0000000000
--- a/packages/odyssey/src/scss/components/_forms.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-form {
- @include border-radius($base-border-radius);
-
- max-width: calc(#{$max-line-length} + #{$spacing-m} + #{$spacing-m} + 2px);
- margin-block-start: 0;
- margin-block-end: $spacing-m;
- margin-inline: 0;
- padding-block: $spacing-m;
- padding-inline: $spacing-m;
- border: 1px solid $border-color-display;
-
- &:last-child {
- margin-block-end: 0;
- }
-}
-
-.ods-form--header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-block-start: 0;
- margin-block-end: $spacing-s;
- margin-inline: 0;
-}
-
-.ods-form--title {
- margin-block: $spacing-xs-em;
- margin-inline: $spacing-xs-em;
- padding-block: 0;
- padding-inline: 0;
- color: $text-heading;
- font-size: $size-title-4;
- font-weight: 600;
- line-height: $title-line-height;
-}
-
-.ods-form--actions {
- display: flex;
- justify-content: flex-end;
-
- &:not(:last-child) {
- margin-block-end: $spacing-s;
- }
-
- [data-readonly] & {
- display: none;
- }
-}
-
-.ods-form--footer {
- font-size: $size-body-caption;
-}
diff --git a/packages/odyssey/src/scss/components/_infobox.scss b/packages/odyssey/src/scss/components/_infobox.scss
deleted file mode 100644
index 26f2bd74fb..0000000000
--- a/packages/odyssey/src/scss/components/_infobox.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-infobox {
- @include border-radius($base-border-radius);
-
- display: grid;
- grid-template-areas:
- "icon title"
- ". content"
- ". actions";
- grid-template-columns: max-content 1fr;
- width: 100%;
- max-width: calc(#{$max-line-length} + #{$spacing-m} + #{$spacing-m});
- padding-block: $spacing-m;
- padding-inline: $spacing-m;
- column-gap: $spacing-s;
- background-color: cv("blue", "000");
-
- a {
- color: $text-body;
- text-decoration: underline;
- }
-
- &:not(:last-child) {
- margin-block-end: $spacing-m;
- }
-}
-
-.ods-infobox--icon {
- grid-area: icon;
- align-self: start;
- font-size: $size-title-5;
- line-height: 1;
- justify-self: start;
-}
-
-.ods-infobox--title {
- grid-area: title;
- font-size: $size-title-6;
-}
-
-.ods-infobox--content {
- grid-area: content;
-
- &:not(:last-child) {
- margin-block-end: $spacing-xs;
- }
-}
-
-.ods-infobox--actions {
- display: flex;
- grid-area: actions;
- justify-content: start;
-}
-
-.is-ods-infobox-success {
- background-color: cv("green", "000");
-}
-
-.is-ods-infobox-caution {
- background-color: cv("yellow", "000");
-}
-
-.is-ods-infobox-danger {
- background-color: cv("red", "000");
-}
diff --git a/packages/odyssey/src/scss/components/_input-field-layout.scss b/packages/odyssey/src/scss/components/_input-field-layout.scss
deleted file mode 100644
index a19c83b70f..0000000000
--- a/packages/odyssey/src/scss/components/_input-field-layout.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-fieldset {
- margin-block-start: 0;
- margin-block-end: $spacing-s;
- margin-inline: 0;
-
- &:last-child {
- margin-block: 0;
- margin-inline: 0;
- }
-}
diff --git a/packages/odyssey/src/scss/components/_input-field.scss b/packages/odyssey/src/scss/components/_input-field.scss
deleted file mode 100644
index 214df0676f..0000000000
--- a/packages/odyssey/src/scss/components/_input-field.scss
+++ /dev/null
@@ -1,128 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-field--hint,
-.ods-field--error {
- font-size: $size-body-caption;
-}
-
-.ods-field--hint {
- margin-block-end: $spacing-xs;
- color: $text-body;
-
- .ods-text-input:disabled ~ &,
- .ods-text-input[readonly] ~ & {
- color: $text-sub;
- }
-}
-
-.ods-field--error {
- display: flex;
- align-items: center;
- margin-block-start: $spacing-xs;
- color: $text-danger;
-}
-
-.ods-fieldset--pair {
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
-
- .ods-number-input,
- .ods-text-input,
- .ods-select {
- width: calc(50% - #{$spacing-s});
- }
-}
-
-.ods-fieldset-flex {
- display: flex;
- flex-direction: column;
- max-width: $max-line-length;
-
- .ods-label,
- .ods-input-legend {
- order: 1;
- margin-block-end: $spacing-xs;
- }
-
- .ods-number-input,
- .ods-text-input,
- .ods-select,
- .ods-input--unavailable,
- .ods-fieldset--pair,
- output:not([class]) {
- order: 3;
- }
-
- .ods-input--unavailable {
- margin-block: 0;
- margin-inline: 0;
- }
-
- /* stylelint-disable-next-line no-descending-specificity */
- .ods-field--hint {
- order: 2;
- margin-block-end: $spacing-xs;
-
- + .ods-label {
- margin-block-end: 0;
- }
- }
-
- .ods-field--error {
- order: 4;
- }
-}
-
-.ods-fieldset--attached {
- display: flex;
- max-width: $max-line-length;
-
- .ods-button {
- border-start-start-radius: 0;
- border-start-end-radius: $base-border-radius;
- border-end-start-radius: 0;
- border-end-end-radius: $base-border-radius;
- }
-
- .ods-text-input {
- border-inline-end: 0;
- border-start-start-radius: $base-border-radius;
- border-start-end-radius: 0;
- border-end-start-radius: $base-border-radius;
- border-end-end-radius: 0;
-
- &:focus {
- z-index: 1;
- }
- }
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.ods-input-legend {
- margin-block-start: 0;
- margin-block-end: $spacing-xs-em;
- margin-inline: 0;
- color: $text-heading;
- font-size: $size-body-base;
- font-weight: 600;
-}
-
-.ods-group-legend {
- margin-block-start: 0;
- margin-block-end: $spacing-xs-em;
- margin-inline: 0;
- color: $text-heading;
- font-size: $size-title-5;
- font-weight: 600;
-}
diff --git a/packages/odyssey/src/scss/components/_label.scss b/packages/odyssey/src/scss/components/_label.scss
deleted file mode 100644
index ffe8d0b698..0000000000
--- a/packages/odyssey/src/scss/components/_label.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-label {
- display: flex;
- align-items: flex-end;
- justify-content: space-between;
- color: $text-heading;
- font-weight: 600;
-
- .ods-text-input:disabled ~ &,
- .ods-text-input[readonly] ~ & {
- color: $text-body;
- }
-
- .ods-text-input[type="search"] ~ & {
- @include is-visually-hidden;
- }
-}
-
-.ods-label--optional {
- display: none;
- color: $text-sub;
- font-size: $size-body-caption;
- font-weight: 400;
- line-height: $spacing-m; // Helps optically match line-height above
-
- [data-optional] &,
- :optional ~ .ods-label & {
- display: block;
- }
-}
diff --git a/packages/odyssey/src/scss/components/_modal.scss b/packages/odyssey/src/scss/components/_modal.scss
deleted file mode 100644
index daa04b2fcc..0000000000
--- a/packages/odyssey/src/scss/components/_modal.scss
+++ /dev/null
@@ -1,143 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-modal--overlay {
- display: flex;
- position: fixed;
- z-index: 10;
- inset-block-start: 0;
- inset-inline-end: 0;
- inset-block-end: 0;
- inset-inline-start: 0;
- align-items: center;
- justify-content: center;
- background: rgba(cv("gray", "900"), 0.75);
-}
-
-.ods-modal--dialog {
- @include border-radius($base-border-radius);
-
- position: relative;
- max-width: calc(#{$max-line-length} + #{$spacing-m} + #{$spacing-m});
- max-height: calc(100vh - #{$spacing-m});
- padding-block-start: $spacing-m;
- padding-block-end: 0;
- padding-inline: $spacing-m;
- overflow-y: auto;
- background-color: $white;
-}
-
-.ods-modal--header {
- display: flex;
- flex-direction: column;
-}
-
-.ods-modal--dismiss {
- align-self: flex-end;
- margin-block-end: $spacing-xs;
-}
-
-.ods-modal--title {
- margin-block-start: 0;
- margin-block-end: 0;
- color: $text-heading;
- font-size: $size-title-4;
- font-weight: 600;
- line-height: $title-line-height;
-}
-
-.ods-modal--content {
- padding-block-start: $spacing-xs;
- padding-block-end: $spacing-l;
- padding-inline: 0;
- font-size: $size-body-base;
-}
-
-.ods-modal--footer {
- display: flex;
- justify-content: flex-end;
- padding-block-end: $spacing-m;
-}
-
-// Animations
-
-@keyframes overlay-in {
- from {
- opacity: 0;
- }
-
- to {
- opacity: 1;
- }
-}
-
-@keyframes overlay-out {
- from {
- opacity: 1;
- }
-
- to {
- opacity: 0;
- }
-}
-
-@keyframes dialog-in {
- from {
- transform: scale(0.7);
- opacity: 0;
- }
-
- to {
- transform: scale(1);
- opacity: 1;
- }
-}
-
-@keyframes dialog-out {
- from {
- transform: scale(1);
- opacity: 1;
- }
-
- to {
- transform: scale(0.7);
- opacity: 0;
- }
-}
-
-.ods-modal {
- display: none;
-
- &.is-open {
- display: block;
- }
-
- &[aria-hidden="false"] {
- .ods-modal--overlay {
- animation: overlay-in $base-duration $base-timing;
- }
-
- .ods-modal--dialog {
- animation: dialog-in $base-duration $base-timing;
- }
- }
-
- &[aria-hidden="true"] {
- .ods-modal--overlay {
- animation: overlay-out $base-duration $base-timing;
- }
-
- &[aria-hidden="true"] .ods-modal--dialog {
- animation: dialog-out $base-duration $base-timing;
- }
- }
-}
diff --git a/packages/odyssey/src/scss/components/_number-input.scss b/packages/odyssey/src/scss/components/_number-input.scss
deleted file mode 100644
index 5b7c02860c..0000000000
--- a/packages/odyssey/src/scss/components/_number-input.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-number-input {
- @include input-baseline;
-
- &[readonly] {
- appearance: textfield;
- }
-}
diff --git a/packages/odyssey/src/scss/components/_radio-button-layout.scss b/packages/odyssey/src/scss/components/_radio-button-layout.scss
deleted file mode 100644
index a0d37dce4a..0000000000
--- a/packages/odyssey/src/scss/components/_radio-button-layout.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-radio--label {
- &:last-child {
- margin-block-end: 0;
- }
-}
diff --git a/packages/odyssey/src/scss/components/_radio-button.scss b/packages/odyssey/src/scss/components/_radio-button.scss
deleted file mode 100644
index 10a14dd5b2..0000000000
--- a/packages/odyssey/src/scss/components/_radio-button.scss
+++ /dev/null
@@ -1,180 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-/* stylelint-disable no-descending-specificity, max-nesting-depth */
-
-.ods-radio {
- @include is-visually-hidden;
-
- &:checked {
- + .ods-radio--label {
- &::before {
- border-color: $color-primary-base;
- background-color: $color-primary-base;
- }
-
- &::after {
- background: $white;
- }
- }
- }
-
- &:focus,
- &.is-ods-radio-focus {
- + .ods-radio--label {
- &::before {
- @include outline($focus-ring-primary, 2px);
-
- border-color: $color-primary-base;
- }
- }
- }
-
- &:disabled {
- + .ods-radio--label {
- color: $text-body;
- cursor: not-allowed;
-
- &::before {
- border-color: $border-input-disabled;
- background-color: $bg-input-disabled;
- }
- }
-
- &:checked {
- + .ods-radio--label {
- &::before {
- border-color: $color-primary-light;
- background-color: $color-primary-light;
- }
-
- &::after {
- background-color: $white;
- }
- }
- }
- }
-
- &:invalid,
- &.is-ods-radio-invalid {
- &:hover:not(:checked) + .ods-radio--label::before {
- border-color: $color-danger-dark;
- }
-
- + .ods-radio--label {
- color: $text-danger;
-
- &::before {
- border-color: $color-danger-base;
- }
- }
-
- &:checked {
- + .ods-radio--label {
- &::before {
- background-color: $color-danger-base;
- }
- }
- }
-
- &:focus {
- + .ods-radio--label {
- &::before {
- @include outline($focus-ring-danger, 2px);
-
- border-color: $color-danger-base;
- }
- }
- }
-
- &:disabled {
- + .ods-radio--label {
- color: $text-danger;
-
- &::before {
- border-color: $color-danger-base-disabled;
- background: $white;
- }
- }
-
- &:hover {
- + .ods-radio--label {
- &::before {
- border-color: $color-danger-base-disabled;
- }
- }
- }
-
- &:checked {
- + .ods-radio--label {
- &::before {
- border-color: $color-danger-base-disabled;
- background-color: $color-danger-base-disabled;
- }
-
- &::after {
- border-color: $color-danger-base-disabled;
- background-color: $white;
- }
- }
- }
- }
- }
-}
-
-.ods-radio--label {
- display: block;
- position: relative;
- margin-block-end: $spacing-xs;
- padding-inline-start: 1em + $spacing-s-em;
- font-size: $size-body-base;
- font-weight: 400;
- text-align: start;
-
- &::before,
- &::after {
- @include border-radius(1.125rem);
-
- content: "";
- display: block;
- position: absolute;
- inset-block-start: 50%;
- inset-inline-start: 0;
- width: 1em;
- height: 1em;
- transition-property: border-color, background, opacity, box-shadow;
- transition-duration: $base-duration;
- transition-timing-function: $base-timing;
- border: 2px solid transparent;
- }
-
- // Box
- &::before {
- transform: translateY(-50%);
- border-color: $border-color-ui;
- }
-
- // Check
- &::after {
- transform: translateY(-50%) scale(0.4);
- background-color: transparent;
- background-repeat: no-repeat;
- background-position: center;
- }
-
- &:hover,
- &.is-ods-radio-hover {
- &::before {
- border-color: $color-primary-base;
- }
- }
-}
diff --git a/packages/odyssey/src/scss/components/_select.scss b/packages/odyssey/src/scss/components/_select.scss
deleted file mode 100644
index eae76df55e..0000000000
--- a/packages/odyssey/src/scss/components/_select.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-select:not([data-type]) {
- @include input-baseline;
-
- background-image: get-icon("caret", $text-body);
- background-repeat: no-repeat;
- background-position: right $spacing-s-em center;
- background-size: $size-body-caption;
- appearance: none;
-
- option {
- padding-block: 0;
- padding-inline: 0;
- }
-
- &[multiple] {
- background-image: none;
- }
-}
diff --git a/packages/odyssey/src/scss/components/_status-layout.scss b/packages/odyssey/src/scss/components/_status-layout.scss
deleted file mode 100644
index dac18f6e72..0000000000
--- a/packages/odyssey/src/scss/components/_status-layout.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-status {
- margin-block-end: $spacing-m;
-
- &:last-child {
- margin-block-end: 0;
- }
-}
diff --git a/packages/odyssey/src/scss/components/_status.scss b/packages/odyssey/src/scss/components/_status.scss
deleted file mode 100644
index 1f8758ed11..0000000000
--- a/packages/odyssey/src/scss/components/_status.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-$status-indicator-size: 1em * 0.5;
-
-.ods-status--label {
- display: block;
- margin-block-end: $spacing-xs;
- font-weight: 600;
-}
-
-.ods-status--value {
- position: relative;
- padding-inline-start: $status-indicator-size + $spacing-xs-em;
- background-color: transparent;
- color: $text-body;
-
- &::before {
- @include border-radius(1em);
-
- content: "";
- position: absolute;
- inset-block-start: 50%;
- inset-inline-start: 0;
- width: $status-indicator-size;
- height: $status-indicator-size;
- margin-inline-end: $spacing-xs;
- transform: translateY(-50%);
- background-color: cv("gray", "600");
- }
-}
-
-.is-ods-status-label-hidden {
- .ods-status--label {
- @include is-visually-hidden;
- }
-}
-
-.is-ods-status-success {
- .ods-status--value {
- &::before {
- background-color: $color-success-base;
- }
- }
-}
-
-.is-ods-status-caution {
- .ods-status--value {
- &::before {
- background-color: $color-caution-base;
- }
- }
-}
-
-.is-ods-status-danger {
- .ods-status--value {
- &::before {
- background-color: $color-danger-base;
- }
- }
-}
diff --git a/packages/odyssey/src/scss/components/_tab.scss b/packages/odyssey/src/scss/components/_tab.scss
deleted file mode 100644
index 3554060d3b..0000000000
--- a/packages/odyssey/src/scss/components/_tab.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-tabs--tablist {
- position: relative;
- border-block-end: 1px solid $border-color-display;
-}
-
-.ods-tabs--tab {
- display: inline-block;
- position: relative;
- margin-block: 0;
- margin-inline: 0;
- padding-block: $spacing-s;
- padding-inline: $spacing-s;
- border: 0;
- background: none;
- color: $text-body;
- font-family: inherit;
- font-size: $size-title-6;
- font-weight: 600;
-
- &[aria-selected="true"] {
- &::before {
- content: "";
- position: absolute;
- inset-block-end: -1px;
- inset-inline-start: 0;
- width: 100%;
- height: 3px;
- background: $color-primary-base;
- }
- }
-}
-
-.ods-tabs--tabpanel [role="tabpanel"] {
- padding-block: $spacing-l;
- padding-inline: 0;
-
- &:focus {
- outline: none;
- }
-}
diff --git a/packages/odyssey/src/scss/components/_table.scss b/packages/odyssey/src/scss/components/_table.scss
deleted file mode 100644
index f3fc4ad562..0000000000
--- a/packages/odyssey/src/scss/components/_table.scss
+++ /dev/null
@@ -1,203 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-/* stylelint-disable selector-max-compound-selectors, max-nesting-depth */
-
-.ods-table {
- width: auto;
- margin-block: 0;
- margin-inline: 0;
- border-spacing: 0;
- border-collapse: collapse;
- line-height: $title-line-height;
-
- &:only-child {
- margin-block-end: 0;
- }
-
- caption {
- @include is-visually-hidden;
- }
-
- td,
- th {
- max-width: $max-line-length;
- padding-block: $spacing-s;
- padding-inline: $spacing-s;
- text-align: start;
- vertical-align: baseline;
- overflow-wrap: break-word;
- }
-
- th {
- color: $text-heading;
- font-weight: 600;
- }
-
- thead {
- th {
- border-block-start: 1px solid $border-color-display;
- border-block-end: 1px solid $border-color-display;
- }
- }
-
- tbody {
- [rowspan] {
- border-block-end: 1px solid $border-color-display;
- }
-
- tr {
- td,
- th {
- border-block-end: 1px solid $border-color-display;
- }
-
- &:first-child {
- [rowspan] {
- border-block-start: 0;
- }
- }
- }
- }
-
- &[data-null] {
- tbody {
- display: block;
- }
-
- tfoot {
- tr {
- td {
- max-width: 100%;
- padding-block: $spacing-l;
- padding-inline: $spacing-xl;
- background: cv("gray", "000");
- color: $text-sub;
- text-align: center;
- }
- }
- }
- }
-
- .ods-table--sort {
- position: relative;
- align-items: center;
- width: 100%;
- padding-block: 0;
- padding-inline: 0;
- border: 0;
- background: none;
- font-family: inherit;
- font-size: inherit;
- font-weight: inherit;
- text-align: inherit;
- white-space: nowrap;
- }
-
- .is-ods-table-unsorted,
- .is-ods-table-asc,
- .is-ods-table-desc {
- padding-block: 0;
- padding-inline-start: 0;
- padding-inline-end: calc(1em + #{$spacing-s});
-
- &::after {
- content: "";
- position: absolute;
- inset-block-start: 50%;
- inset-inline-end: 0;
- width: 1em;
- height: 1em;
- margin-block: 0;
- margin-inline-start: $spacing-s;
- margin-inline-end: 0;
- transform: translateY(-50%) scale(0.75);
- background-repeat: no-repeat;
- background-position: center;
- }
- }
-
- .is-ods-table-unsorted {
- &::after {
- background-image: get-icon("double-arrow", $text-sub);
- }
-
- &:hover {
- &::after {
- background-image: get-icon("double-arrow", $text-heading);
- }
- }
- }
-
- .is-ods-table-asc {
- &::after {
- background-image: get-icon("arrow", $text-heading);
- }
- }
-
- .is-ods-table-desc {
- &::after {
- transform: translateY(-50%) rotate(180deg) scale(0.75);
- background-image: get-icon("arrow", $text-heading);
- }
- }
-
- .is-ods-table-num {
- /* Numerical data display should not swap for RTL languages. */
- /* stylelint-disable-next-line liberty/use-logical-spec */
- text-align: right;
- font-feature-settings: "lnum", "tnum";
- }
-
- .is-ods-table-date {
- white-space: nowrap;
- }
-
- .is-ods-table-checkbox {
- padding-inline-end: 0;
-
- .u-visually-hidden {
- display: inline-block;
- position: relative;
- width: 0;
- height: 1em;
- }
- }
-}
-
-.ods-table--figure {
- max-width: 100%;
- margin-block-start: 0;
- margin-block-end: $type-margin;
- margin-inline: 0;
- // OQ: Type margin or fixed margin?
- overflow-x: auto;
-
- &:last-child {
- margin-block: 0;
- margin-inline: 0;
- }
-
- .ods-table--figcaption {
- margin-block-end: $spacing-xs-em;
- color: $text-heading;
- font-size: $size-title-4;
- font-weight: 600;
- text-align: start;
- }
-}
-
-.is-ods-table-inessential {
- @media only screen and (max-width: 40rem) {
- @include is-visually-hidden;
- }
-}
diff --git a/packages/odyssey/src/scss/components/_tag.scss b/packages/odyssey/src/scss/components/_tag.scss
deleted file mode 100644
index d291a25996..0000000000
--- a/packages/odyssey/src/scss/components/_tag.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-tag {
- @include border-radius($base-border-radius);
-
- display: inline-block;
- margin-block-start: 0;
- margin-block-end: $spacing-xs;
- margin-inline-start: 0;
- margin-inline-end: $spacing-xs;
- padding-block: 0;
- padding-inline: $spacing-xs-em;
- background: cv("gray", "100");
- color: $text-body;
-}
-
-.ods-tag--list {
- display: inline-block;
- margin-block-end: -$spacing-xs;
- margin-inline-start: $spacing-xs;
- list-style-type: none;
-}
diff --git a/packages/odyssey/src/scss/components/_text-input.scss b/packages/odyssey/src/scss/components/_text-input.scss
deleted file mode 100644
index 4442e99ec9..0000000000
--- a/packages/odyssey/src/scss/components/_text-input.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-text-input {
- @include input-baseline;
-
- &[type="search"] {
- padding-inline-start: ms(1) + $spacing-s + $spacing-xs;
- background-image: get-icon("search", $text-body);
- background-repeat: no-repeat;
- background-position: left $spacing-s center;
- background-size: ms(1);
-
- &::-webkit-search-decoration,
- &::-webkit-search-cancel-button,
- &::-webkit-search-results-button,
- &::-webkit-search-results-decoration {
- display: none;
- }
-
- &::-ms-clear,
- &::-ms-reveal {
- display: none;
- }
-
- [dir="rtl"] & {
- background-position: right $spacing-s center;
- }
- }
-}
-
-.ods-text-area {
- min-width: $spacing-m;
- max-width: $max-line-length;
- min-height: $spacing-m * 2;
- padding-block-start: $spacing-xs-em;
- padding-block-end: $spacing-s-em;
- padding-inline: $spacing-s-em;
-}
diff --git a/packages/odyssey/src/scss/components/_toast-pen.scss b/packages/odyssey/src/scss/components/_toast-pen.scss
deleted file mode 100644
index 009f70c6b1..0000000000
--- a/packages/odyssey/src/scss/components/_toast-pen.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-toast-pen {
- display: grid;
- position: fixed;
- z-index: 1;
- inset-inline-end: $spacing-m;
- inset-block-end: $spacing-m;
- grid-gap: $spacing-s 0;
- grid-template-columns: minmax(min-content, max-content);
- max-height: 100vh;
- overflow: visible;
-}
diff --git a/packages/odyssey/src/scss/components/_toast.scss b/packages/odyssey/src/scss/components/_toast.scss
deleted file mode 100644
index 0cc3005249..0000000000
--- a/packages/odyssey/src/scss/components/_toast.scss
+++ /dev/null
@@ -1,136 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-.ods-toast {
- @include border-radius($base-border-radius);
-
- display: grid;
- position: relative;
- grid-gap: 0 $spacing-s;
- grid-template-columns: min-content 1fr min-content;
- align-items: start;
- max-width: $max-line-length;
- padding-block: $spacing-m;
- padding-inline: $spacing-s;
- animation-name: ods-toast-in, ods-toast-out;
- animation-duration: 300ms, 1000ms;
- animation-delay: 0s, 5300ms;
- border: 0;
- background-color: cv("blue", "900");
- box-shadow: 0 8px 12px rgba(cv("gray", "900"), 0.12);
- color: $white;
-
- &:hover,
- &:focus-within {
- animation-delay: 0s, 300s;
- }
-
- // TODO: We should create default vars (e.g. $durationOut) since it is
- // used here and on line 36.
- &.is-toast-dismissed {
- animation-name: ods-toast-out;
- animation-duration: 1000ms;
- animation-delay: 1000ms; // TODO: play around with the timing here.
- }
-
- &:last-child {
- margin-block-end: 0;
- }
-}
-
-.ods-toast--icon {
- width: $size-title-4;
- color: $white;
- font-size: $size-title-4;
- line-height: 1;
-}
-
-.ods-toast--title {
- margin-block: 0;
- margin-inline: 0;
- padding-inline-end: $spacing-m;
- color: $white;
- font-size: $size-body-base;
- font-weight: 600;
- line-height: $base-line-height;
-}
-
-.ods-toast--dismiss {
- position: absolute;
- inset-block-start: $spacing-xs;
- inset-inline-end: $spacing-xs;
- margin-block-end: 0;
- border: 0;
-}
-
-.ods-toast--body {
- grid-column: 2;
- margin-block-end: 0;
- font-size: $size-body-base;
-}
-
-.is-ods-toast-success {
- background-color: cv("green", "600");
-}
-
-.is-ods-toast-caution {
- background-color: cv("yellow", "500");
- color: $text-body;
-
- .ods-toast--icon {
- color: $text-body;
- }
-
- .ods-toast--title {
- color: $text-heading;
- }
-}
-
-.is-ods-toast-danger {
- background-color: cv("red", "500");
-}
-
-@keyframes ods-toast-in {
- 0% {
- transform: translateX(50%);
- opacity: 0;
- }
-
- 100% {
- transform: translateX(0);
- opacity: 1;
- }
-}
-
-@keyframes ods-toast-out {
- 0% {
- opacity: 1;
- }
-
- 100% {
- opacity: 0;
- }
-}
-
-@media (prefers-reduced-motion) {
- .ods-toast {
- animation-name: ods-toast-in;
- animation-duration: 300ms;
- animation-delay: 0s;
-
- &.is-toast-dismissed {
- animation-name: ods-toast-out;
- animation-duration: 300ms;
- animation-delay: 0s;
- }
- }
-}
diff --git a/packages/odyssey/src/scss/components/_tooltip.scss b/packages/odyssey/src/scss/components/_tooltip.scss
deleted file mode 100644
index 0148a3255e..0000000000
--- a/packages/odyssey/src/scss/components/_tooltip.scss
+++ /dev/null
@@ -1,224 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-// Rem-based modular scale for type
-// Not ready for general use.
-
-.ods-tooltip {
- @include border-radius($base-border-radius);
-
- display: block;
- visibility: hidden;
- position: absolute;
- z-index: 1;
- padding-block: $spacing-xs;
- padding-inline: $spacing-s;
- transition: opacity $base-duration $base-timing 1s;
- border: 1px solid cv("gray", "900");
- opacity: 0;
- background: cv("gray", "900");
- color: cv("gray", "000");
- font-size: $size-body-caption;
- font-weight: 600;
- line-height: $title-line-height;
- white-space: nowrap;
- pointer-events: none;
-
- &::after,
- &::before {
- content: "";
- position: absolute;
- width: 0;
- height: 0;
- border: solid transparent;
- }
-
- &::after {
- border-width: calc(#{$spacing-xs} - 2px);
- }
-
- &::before {
- border-width: $spacing-xs;
- }
-
- *:focus + &,
- .has-ods-tooltip:hover &,
- .has-ods-tooltip:focus & {
- visibility: visible;
- opacity: 1;
- }
-}
-
-.is-ods-tooltip-top {
- inset-block-end: calc(100% + #{$spacing-s});
- inset-inline-start: 50%;
- transform: translateX(-50%);
-
- &::after,
- &::before {
- inset-block-start: 100%;
- inset-inline-start: 50%;
- transform: translateX(-50%);
- }
-
- &::after {
- border-block-start-color: cv("gray", "900");
- }
-
- &::before {
- border-block-start-color: cv("gray", "900");
- }
-
- [dir="rtl"] & {
- transform: translateX(50%);
-
- &::after,
- &::before {
- transform: translateX(50%);
- }
- }
-}
-
-.is-ods-tooltip-end {
- inset-block-start: 50%;
- inset-inline-start: calc(100% + #{$spacing-s});
- transform: translateY(-50%);
-
- &::after,
- &::before {
- inset-block-start: 50%;
- inset-inline-end: 100%;
- transform: translateY(-50%);
- }
-
- &::after {
- border-inline-end-color: cv("gray", "900");
- }
-
- &::before {
- border-inline-end-color: cv("gray", "900");
- }
-}
-
-.is-ods-tooltip-bottom {
- inset-block-start: calc(100% + #{$spacing-s});
- inset-inline-start: 50%;
- transform: translateX(-50%);
-
- &::after,
- &::before {
- inset-block-end: 100%;
- inset-inline-start: 50%;
- transform: translateX(-50%);
- }
-
- &::after {
- border-block-end-color: cv("gray", "900");
- }
-
- &::before {
- border-block-end-color: cv("gray", "900");
- }
-
- [dir="rtl"] & {
- transform: translateX(50%);
-
- &::after,
- &::before {
- transform: translateX(50%);
- }
- }
-}
-
-.is-ods-tooltip-start {
- inset-block-start: 50%;
- inset-inline-end: calc(100% + #{$spacing-s});
- transform: translateY(-50%);
-
- &::after,
- &::before {
- inset-block-start: 50%;
- inset-inline-start: 100%;
- transform: translateY(-50%);
- }
-
- &::after {
- border-inline-start-color: cv("gray", "900");
- }
-
- &::before {
- border-inline-start-color: cv("gray", "900");
- }
-}
-
-.has-ods-tooltip {
- display: inline-block;
- position: relative;
-}
-
-@media only screen and (max-width: 40rem) {
- .ods-tooltip {
- @include border-radius(0);
-
- display: block;
- visibility: hidden;
- position: fixed;
- z-index: 1;
- inset-block-end: 0;
- width: 100vw;
- border: 0;
- opacity: 0;
- font-size: $size-body-caption;
- white-space: wrap;
- pointer-events: none;
-
- &::after,
- &::before {
- content: "";
- position: absolute;
- width: 0;
- height: 0;
- border: solid transparent;
- }
-
- &::after {
- border-width: calc(#{$spacing-xs} - 2px);
- }
-
- &::before {
- border-width: $spacing-xs;
- }
- }
-
- .is-ods-tooltip-top,
- .is-ods-tooltip-end,
- .is-ods-tooltip-bottom,
- .is-ods-tooltip-start {
- inset-block-start: 0;
- inset-inline-end: unset;
- inset-block-end: unset;
- inset-inline-start: 0;
- transform: none;
-
- &::after,
- &::before {
- inset-block-start: 100%;
- inset-inline-start: 50%;
- transform: translateX(-50%);
- border: 0;
-
- [dir="rtl"] & {
- transform: translateX(50%);
- }
- }
- }
-}
diff --git a/packages/odyssey/src/scss/odyssey.scss b/packages/odyssey/src/scss/odyssey.scss
deleted file mode 100755
index 0602facc1d..0000000000
--- a/packages/odyssey/src/scss/odyssey.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-@charset 'UTF-8';
-
-// Abstracts
-@import "abstracts/functions";
-@import "abstracts/colors";
-@import "abstracts/mixins";
-@import "abstracts/tokens";
-
-// Base
-@import "base/reset";
-@import "base/accessibility";
-@import "base/iconography";
-@import "base/typography";
-
-// Components
-@import "components/banner";
-@import "components/button";
-@import "components/button-context";
-@import "components/button-layout";
-@import "components/checkbox";
-@import "components/checkbox-context";
-@import "components/checkbox-layout";
-@import "components/forms";
-@import "components/forms-context";
-@import "components/input-field";
-@import "components/input-field-layout";
-@import "components/label";
-@import "components/modal";
-@import "components/number-input";
-@import "components/radio-button";
-@import "components/radio-button-layout";
-@import "components/infobox";
-@import "components/select";
-@import "components/status";
-@import "components/status-layout";
-@import "components/tab";
-@import "components/table";
-@import "components/tag";
-@import "components/text-input";
-@import "components/toast";
-@import "components/toast-pen";
-@import "components/tooltip";
-
-// Vendor Extensions
-@import "vendors-ext/choices-ext";
diff --git a/packages/odyssey/src/scss/vendors-ext/_choices-ext.scss b/packages/odyssey/src/scss/vendors-ext/_choices-ext.scss
deleted file mode 100644
index 371c0ecc1b..0000000000
--- a/packages/odyssey/src/scss/vendors-ext/_choices-ext.scss
+++ /dev/null
@@ -1,511 +0,0 @@
-/*!
- * Copyright (c) 2018-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-/* stylelint-disable color-no-hex, declaration-no-important, selector-class-pattern, max-nesting-depth, selector-max-compound-selectors, selector-no-qualifying-type, no-descending-specificity */
-
-$choices-button-dimension: 8px !default;
-$choices-button-offset: 8px !default;
-$choices-icon-cross: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==") !default;
-$choices-icon-cross-inverse: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==") !default;
-
-.ods-select {
- position: relative;
- max-width: $max-line-length;
- overflow: hidden;
- font-size: $size-body-base;
-
- &:focus,
- &.is-ods-select-focused,
- .is-ods-select-focus & {
- @include border-radius($base-border-radius);
-
- outline: none;
- box-shadow: 0 0 0 4px $color-primary-light;
-
- &.is-ods-select-open {
- box-shadow: 0 0 0 4px $color-primary-light,
- 0 2px 0 4px $color-primary-light;
-
- &.is-ods-select-flipped {
- box-shadow: 0 0 0 4px $color-primary-light,
- 0 -2px 0 4px $color-primary-light;
- }
- }
- }
-
- &:last-child {
- margin-block-end: 0;
- }
-
- &.is-ods-select-open {
- overflow: initial;
- }
-
- &.is-ods-select-disabled {
- .ods-select--inner,
- .ods-select--input {
- border: 1px solid $border-input-disabled;
- background-color: $bg-input-disabled;
- color: $text-sub;
- cursor: not-allowed;
- user-select: none;
-
- &:hover {
- border-color: $border-color-ui;
- }
- }
-
- &:focus,
- &.is-ods-select-focused {
- box-shadow: none;
- }
-
- .ods-select--item {
- cursor: not-allowed;
- }
- }
-
- .is-ods-select-invalid & {
- &:focus,
- &.is-ods-select-focused {
- @include outline($focus-ring-danger);
- @include border-radius($base-border-radius);
-
- outline: none;
-
- &.is-ods-select-open {
- box-shadow: 0 0 0 4px $color-danger-light,
- 0 2px 0 4px $color-danger-light;
-
- &.is-ods-select-flipped {
- box-shadow: 0 0 0 4px $color-danger-light,
- 0 -2px 0 4px $color-danger-light;
- }
- }
- }
-
- .ods-select--inner,
- .ods-select--input {
- border-color: $color-danger-base;
- }
- }
-
- [hidden] {
- display: none !important;
- }
-}
-
-.ods-select[data-type*="select-one"],
-.ods-select[data-type*="select-multiple"] {
- .ods-select--input {
- display: inline-block;
- width: 100%;
- margin-block-start: 0;
- margin-block-end: $spacing-xs;
- margin-inline: 0;
- padding-block: 0;
- padding-inline: 0;
- border-block-end: 0;
- background-color: transparent;
- vertical-align: top;
- }
-
- .ods-select--button {
- @include border-radius(10em);
-
- position: absolute;
- inset-block-start: 50%;
- inset-inline-end: 0;
- width: 20px;
- height: 20px;
- margin-block-start: -$spacing-s;
- margin-inline-end: 25px;
- padding-block: 0;
- padding-inline: 0;
- opacity: 0.25;
- background-image: $choices-icon-cross-inverse;
- background-size: 8px;
-
- &:hover,
- &:focus {
- opacity: 1;
- }
-
- &:focus {
- @include outline($focus-ring-primary);
- }
- }
-
- .ods-select--item[data-value=""] .ods-select--button {
- display: none;
- }
-
- &::after {
- content: "";
- position: absolute;
- inset-block-start: 50%;
- inset-inline-end: $spacing-s-em;
- width: $size-body-caption;
- height: $size-body-caption;
- transform: translateY(-50%);
- background-image: get-icon("caret", $text-body);
- background-repeat: no-repeat;
- background-size: $size-body-caption;
- pointer-events: none;
- }
-
- &.is-ods-select-open {
- &::after {
- transform: translateY(-50%) rotate(180deg);
- }
- }
-
- &[dir="rtl"] {
- &::after {
- inset-inline-end: auto;
- inset-inline-start: 11.5px;
- }
-
- .ods-select--button {
- inset-inline-end: auto;
- inset-inline-start: 0;
- margin-inline-end: 0;
- margin-inline-start: 25px;
- }
- }
-}
-
-.ods-select[data-type*="select-one"] {
- .ods-select--button {
- display: none; // remove this functionality for Single Select, unavailable via JS
- }
-}
-
-.ods-select[data-type*="select-multiple"],
-.ods-select[data-type*="text"] {
- .ods-select--inner {
- padding-block-end: 0;
- cursor: text;
- }
-
- .ods-select--button {
- @include border-radius(100%);
-
- display: inline-block;
- position: relative;
- width: 1em;
- height: 1em;
- margin-block-start: 0;
- margin-inline-end: 0;
- margin-block-end: 0;
- margin-inline-start: $spacing-s;
- padding-block: 0;
- padding-inline: 0;
- opacity: 1;
- background-color: cv("blue", "400");
- background-image: get-icon("close", $white);
- background-position: center;
- background-size: ($base-line-height * 1em) - 1em; // funky math to evade half-pixel rounding errors
- line-height: 1;
-
- &:hover,
- &:focus {
- background-color: $color-primary-base;
- }
- }
-}
-
-.ods-select--inner {
- @include border-radius($base-border-radius);
-
- display: inline-block;
- width: 100%;
- padding-block: $spacing-xs-em;
- padding-inline: $spacing-s-em;
- overflow: hidden;
- transition-property: border-color, background-color, box-shadow;
- transition-duration: $base-duration;
- transition-timing-function: $base-timing;
- border: 1px solid $border-color-ui;
- background-color: $white;
- box-shadow: 0 0 0 0 $color-primary-light;
- color: $text-body;
- font-family: $body-font-family;
- font-size: $size-body-base;
- line-height: $base-line-height;
- vertical-align: top;
-
- &:hover,
- .is-ods-select-focused &,
- .is-ods-select-open &,
- .is-ods-select-focus &,
- .is-ods-select-hover & {
- border-color: $color-primary-base;
- }
-
- .is-ods-select-open &,
- .is-ods-select-invalid .is-ods-select-open & {
- border-start-start-radius: $base-border-radius;
- border-start-end-radius: $base-border-radius;
- border-end-start-radius: 0;
- border-end-end-radius: 0;
- border-block-end-color: $border-color-ui;
- }
-
- .is-ods-select-flipped.is-ods-select-open &,
- .is-ods-select-invalid .is-ods-select-flipped.is-ods-select-open & {
- border-start-start-radius: 0;
- border-start-end-radius: 0;
- border-end-start-radius: $base-border-radius;
- border-end-end-radius: $base-border-radius;
- border-block-start-color: $border-color-ui;
- border-block-end-color: $color-primary-base;
- }
-}
-
-.ods-select--list {
- margin-block: 0;
- margin-inline: 0;
- padding-inline-start: 0;
- list-style: none;
-}
-
-.ods-select--list--single {
- display: inline-block;
- width: 100%;
-
- [dir="rtl"] & {
- //padding-inline-end: 4px;
- //padding-inline-start: 16px;
- }
-
- .ods-select--item {
- width: 100%;
- }
-}
-
-.ods-select--list--multiple {
- display: inline;
-
- .ods-select--item {
- @include border-radius(1em);
-
- display: inline-block;
- margin-inline-end: $spacing-xs;
- margin-block-end: $spacing-xs;
- padding-block: 0;
- padding-inline: $spacing-s;
- border: 1px solid $color-primary-light;
- background-color: cv("blue", "000");
- color: $text-body;
- font-size: $size-body-base;
- font-weight: 400;
- line-height: calc((#{$base-line-height} * 1em) - 2px);
- // Adjust for pill border
- overflow-wrap: break-word;
- vertical-align: middle;
-
- &[data-deletable] {
- padding-inline-end: $spacing-xs;
- }
-
- [dir="rtl"] & {
- margin-inline-end: 0;
- margin-inline-start: $spacing-xs;
- }
-
- &.is-ods-select-highlighted {
- background-color: $color-primary-light;
- }
-
- .is-ods-select-disabled & {
- border: 1px solid $border-input-disabled;
- background-color: $bg-input-disabled;
- }
- }
-}
-
-.ods-select--list--dropdown {
- visibility: hidden;
- position: absolute;
- z-index: 1;
- inset-block-start: 100%;
- width: 100%;
- overflow: hidden;
- border: 1px solid $border-color-ui;
- border-block-start-width: 0;
- border-start-start-radius: 0;
- border-start-end-radius: 0;
- border-end-start-radius: $base-border-radius;
- border-end-end-radius: $base-border-radius;
- background-color: $white;
- overflow-wrap: break-word;
- will-change: visibility;
-
- &.is-ods-select-active {
- visibility: visible;
- }
-
- .is-ods-select-focused & {
- @include outline($focus-ring-primary);
-
- clip-path: inset(0 -4px -4px -4px);
- }
-
- .is-ods-select-open & {
- border-color: $color-primary-base;
- }
-
- .is-ods-select-flipped & {
- inset-block-start: auto;
- inset-block-end: 100%;
- border-block-end: 0;
- border-block-start-width: 1px;
- border-start-start-radius: $base-border-radius;
- border-start-end-radius: $base-border-radius;
- border-end-start-radius: 0;
- border-end-end-radius: 0;
- }
-
- .is-ods-select-flipped.is-ods-select-focused & {
- clip-path: inset(-4px -4px 0 -4px);
- }
-
- .ods-select--list {
- position: relative;
- max-height: 300px;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
- will-change: scroll-position;
- }
-
- .ods-select--item {
- position: relative;
- padding-block: $spacing-xs;
- padding-inline: $spacing-s;
- font-size: $size-body-base;
-
- [dir="rtl"] & {
- text-align: end;
- }
-
- &:empty {
- display: none;
- }
- }
-
- .ods-select--item--selectable {
- @media (min-width: 640px) {
- padding-inline-end: 100px;
-
- &::after {
- content: attr(data-select-text);
- position: absolute;
- inset-block-start: 50%;
- inset-inline-end: $spacing-s;
- transform: translateY(-50%);
- opacity: 0;
- font-size: $size-body-caption;
- }
-
- [dir="rtl"] & {
- padding-inline-end: $spacing-s;
- padding-inline-start: 100px;
- text-align: end;
-
- &::after {
- inset-inline-end: auto;
- inset-inline-start: $spacing-s;
- }
- }
- }
-
- &.is-ods-select-highlighted {
- background-color: cv("blue", "000");
-
- &::after {
- opacity: 0.5;
- }
- }
- }
-
- .is-ods-select-invalid .is-ods-select-focused & {
- @include outline($focus-ring-danger);
- }
-
- .is-ods-select-invalid .is-ods-select-open & {
- border-color: $color-danger-base;
- }
-}
-
-.ods-select--item {
- cursor: default;
-}
-
-.ods-select--item--selectable {
- //cursor: pointer;
-}
-
-.ods-select--item--disabled {
- color: $text-sub;
- cursor: not-allowed;
- user-select: none;
-}
-
-.ods-select--heading {
- padding-block-start: $spacing-s;
- padding-block-end: 0;
- padding-inline: $spacing-s;
- color: $text-sub;
- font-size: $size-body-caption;
- font-weight: 600;
-}
-
-.ods-select--button {
- border: 0;
- background-color: transparent;
- background-repeat: no-repeat;
- background-position: center;
- text-indent: -9999px;
- appearance: none;
-
- &:focus {
- outline: none;
- }
-}
-
-.ods-select--input {
- @include border-radius(0);
-
- display: inline-block;
- max-width: 100%;
- margin-block-end: 5px;
- padding-block: 4px;
- padding-inline-start: 2px;
- padding-inline-end: 0;
- border: 0;
- background-color: $white;
- vertical-align: baseline;
-
- &:focus {
- outline: 0;
- }
-
- [dir="rtl"] & {
- padding-inline-end: 2px;
- padding-inline-start: 0;
- }
-}
-
-.ods-select--placeholder {
- opacity: 0.5;
-}