diff --git a/packages/.archived/docs/.gitignore b/packages/.archived/docs/.gitignore deleted file mode 100644 index 2f55b5b357..0000000000 --- a/packages/.archived/docs/.gitignore +++ /dev/null @@ -1,10 +0,0 @@ -.DS_Store -Thumbs.db -db.json -*.log -node_modules/ -dist/ -source/font -.deploy*/ -vendor/ -getting-started/changelog.md diff --git a/packages/.archived/docs/README.md b/packages/.archived/docs/README.md deleted file mode 100644 index 487da9af06..0000000000 --- a/packages/.archived/docs/README.md +++ /dev/null @@ -1,77 +0,0 @@ -# Odyssey - the Okta design system - -This is the home for Odyssey, Okta's design system. Here you will find assets to build high quality UIs along with documentation to guide you along the way. - -## Contributing - -### Grab all the things - -These docs are maintained in the `docs` package, which exists to document `@okta/odyssey`. - -1. You'll need the `odyssey` repo. - - ```bash - [okta]$ git clone git@github.com:okta/odyssey.git - ``` - -2. Make sure you are on a supported node version: `>=12.20.0`. - -3. Change directory to the `docs` package. - - ```bash - [okta]$ cd odyssey/packages/docs - ``` - -4. Run a [yarn install](https://yarnpkg.com/en/docs/cli/install) - - ```bash - [okta/odyssey/packages/docs]$ yarn install - ``` - -You may need to [install yarn](https://yarnpkg.com/en/docs/install) if it's not available. - -### Serving the docs - -1. Start up VuePress: - - ```bash - [okta/odyssey/packages/docs]$ yarn start - ``` - - This will generate a fresh set of docs and then start a webserver to view them. - -2. Go to - -### Odyssey development - -In order to see your changes to the `@okta/odyssey` package reflected here during development, you'll need to link that package locally. - -1. Change directory to the `@okta/odyssey` package. - - ```bash - [okta/odyssey]$ cd packages/odyssey - ``` - -2. Create a yarn link. - - ```bash - [okta/odyssey/packages/odyssey]$ yarn link - ``` - -3. Change directory to the `docs` package. - - ```bash - [okta/odyssey/packages/odyssey]$ cd ../docs - ``` - -4. Tell `yarn` to utilize the linked package instead of the published one. - - ```bash - [okta/odyssey/packages/docs]$ yarn link @okta/odyssey - ``` - -Now any changes you make in your local version of `@okta/odyssey` should be reflected in your local server. - -## Questions? - -Stop by [#design_system](https://okta.slack.com/messages/C7T2H3KNJ) and say hello (Oktanauts-only for now). diff --git a/packages/.archived/docs/base/color.md b/packages/.archived/docs/base/color.md deleted file mode 100644 index dae26d47c3..0000000000 --- a/packages/.archived/docs/base/color.md +++ /dev/null @@ -1,551 +0,0 @@ ---- -template: plain -id: base-color -title: Color -headline: Color -lede: Odyssey colors consist of a variety of neutral, semantic, and brand values used in all UIs for utmost clarity and readability. -description: Odyssey colors consist of a variety of neutral, semantic, and brand values used in all UIs for utmost clarity and readability. ---- - -
-
- Available Colors -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PaletteSwatchNameHexDoDon't
- Neutral - - - - Gray 900 - - #1d1d21 - - Titles, body copy, icons, shadows, tooltips - - Background colors, buttons, strokes -
- - - Gray 600 - - #6e6e78 - - Caption text, Status label, disabled Overlay Buttons - - Titles, body copy, borders, icons -
- - - Gray 500 - - #8c8c96 - - Interactive UI borders - - Non-interactive borders, titles, body copy, borders, icons -
- - - Gray 200 - - #d7d7dc - - Display borders - - Interactive UI borders, background colors, buttons, titles, body copy -
- - - Gray 100 - - #ebebed - - Read-only/disabled states - - Background colors, borders, buttons, titles, body copy -
- - - Gray 000 - - #f5f5f6 - - Backgrounds, read-only & disabled input fills - - Buttons, borders, titles, body copy, borders -
- - - White - - #ffffff - - Page backgrounds, text - - Titles, body copy -
- Blue - - - - Blue 900 - - #00297a - - Okta logo, brand moments, button hovers - - Plain text -
- - - Blue 500 - - #1662dd - - Links, buttons, icons, hover states, selected states - - Non-interactive UI -
- - - Blue 400 - - #788ee2 - - A11y-friendly UI backgrounds - - N/A -
- - - Blue 300 - - #a7b5ec - - Buttons disabled state fills & borders, focus rings - - N/A -
- - - Blue 000 - - #f2f5ff - - Clear button hover, backgrounds - - N/A -
- Green - - - - Green 900 - - #00503c - - Moments of success, validation, wayfinding - - N/A -
- - - Green 600 - - #008055 - - Background color for success messaging - - Headlines, body copy, fail states, buttons -
- - - Green 500 - - #00b478 - - Moments of success, validation, wayfinding, status - - Headlines, body copy, fail states, buttons -
- - - Green 300 - - #84d2b1 - - N/A - - N/A -
- - - Green 000 - - #e5faf3 - - Moments of success, validation, wayfinding - - N/A -
- Red - - - - Red 900 - - #640019 - - Destructive button & invalid input hovers - - N/A -
- - - Red 500 - - #da372c - - System errors, danger buttons, error states, status dot - - N/A -
- - - Red 300 - - #f88c90 - - Danger button disabled state fills, borders, & focus ring - - N/A -
- - - Red 000 - - #ffdfe2 - - System errors, danger buttons, error states - - Headlines, body copy, links, buttons -
- Yellow - - - - Yellow 900 - - #663800 - - Moments of caution - - Headlines, body copy, links, buttons -
- - - Yellow 500 - - #ffc61c - - Moments of caution, status dot - - Headlines, body copy, links, buttons -
- - - Yellow 300 - - #f9dc77 - - N/A - - Headlines, body copy, links, buttons -
- - - Yellow 000 - - #faf5dc - - Moments of caution - - Headlines, body copy, links, buttons -
- Orange - - - - Orange 500 - - #e97107 - - N/A - - Headlines, body copy, links, buttons -
- Purple - - - - Purple 500 - - #8d6e97 - - Moments of learning, tips, brand moments - - Headlines, body copy, links, buttons -
- Turquoise - - - - Turquoise 500 - - #2d8c9e - - Brand moments - - Headlines, body copy, links, buttons -
- - - Turquoise 400 - - #65adb7 - - Background Color - - Headlines, body copy, links, buttons -
-
- - diff --git a/packages/.archived/docs/base/elements.md b/packages/.archived/docs/base/elements.md deleted file mode 100644 index 445155fdb4..0000000000 --- a/packages/.archived/docs/base/elements.md +++ /dev/null @@ -1,872 +0,0 @@ ---- -template: plain -id: base-elements -title: Elements -headline: Elements -description: A glossary of standard HTML elements provided by Odyssey. -lede: A glossary of standard HTML elements provided by Odyssey. ---- - -## abbr - - - -> The HTML `` element represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation. If present, title must contain this full description and nothing else. - MDN - - - -
-
-

If you're a BE or FE developer, you should checkout our dev docs.

-
- -```html -

- If you're a BE or - FE developer, you should checkout our dev docs. -

-``` - -
- -## address - - - -> The HTML `
` element indicates that the enclosed HTML provides contact information for a person or people, or for an organization. - MDN - - - -
-
-

Okta Headquarters

-
- press@okta.com
- (888) 722-7871 -
-
- -```html -

Okta Headquarters

-
- press@okta.com
- (888) 722-7871 -
-``` - -
- -## blockquote - - - -> The HTML `
` Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the `` element. - MDN - - - -
-
-
-

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.
-
-
- -```html -
-

- 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. -
-
-``` - -
- -## cite - - - -> The HTML Citation element (``) is used to describe a reference to a cited creative work, and must include the title of that work. - MDN - - - -
-
-
-

Tell me, O Muse, of that ingenious hero who travelled far and wide after he had sacked the famous town of Troy.

- -
-
- -```html -
-

- Tell me, O Muse, of that ingenious hero who travelled far and wide after he - had sacked the famous town of Troy. -

-
- First sentence in - The Odyssey - by Homer (Book I). -
-
-``` - -
- -## code - - - -> The HTML `` element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font. - MDN - - - -
-
-

The pop() array method removes the last element of an array and returns that element.

-
- -```html -

- The pop() array method removes the last element of an array and - returns that element. -

-``` - -
- -## del - - - -> The HTML `` element represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code diff information, for example. The `` element can be used for the opposite purpose: to indicate text that has been added to the document. - MDN - -### Accessibility - -Many screen readers do not let users know of the presence of `del`. To fix this, you should consider using `data-a11y-start` and `data-a11y-end`, prepend and append assistive text to the contents of the tag. In the above example, there are additional spaces before and after the text, this is intentional. Not adding these spaces will cause the content within the tag to run into the text within the tag. - - - -
-
-
- There is nothing no code either good or bad, but running it makes it so. -
-
- -```html -
- There is - nothing - no code - either good or bad, but running it makes it so. -
-``` - -
- -## details - - - -> The HTML Details Element (`
`) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the `` element. [...] If the first child of the `
` element is a ``, the contents of the `` element are used as the label for the disclosure widget. - MDN - -### IE11 support - -IE 11 incorrectly renders the `summary` element as "always open". Other than this behavior, it is safe for use. - - - -
-
-
- What is Okta? -

Okta is the foundation for secure connections between people and technology. It’s a service that gives employees, customers, and partners secure access to the tools they need to do their most important work.

-
-
- -```html -
- What is Okta? -

- Okta is the foundation for secure connections between people and technology. - It’s a service that gives employees, customers, and partners secure access - to the tools they need to do their most important work. -

-
-``` - -
- -## dfn - - - -> The HTML Definition element (`)` is used to indicate the term being defined within the context of a definition phrase or sentence. The `

` element, the `

`/`
` pairing, or the `
` element which is the nearest ancestor of the `` is considered to be the definition of the term. - -There are multiple, valid ways to use ``. For the sake of usability, Odyssey recommends you follow one of two formats. - -For most terms, the content of `` should be term you are defining: - - - -
-
-

A cruller is a small, braided torpedo of fried dough.

-
- -```html -

- A cruller is a small, braided torpedo of fried - dough. -

-``` - -
- - - -If you're referencing an acronym or abbreviation, you may also combine it with ``: - - - -
-
-

APF is general-use, unbleached wheat flour.

-
- -```html -

- APF is - general-use, unbleached wheat flour. -

-``` - -
- - - -In this example, the browser can correctly identify "All Purpose Flour" as the defined term, even though "APF" is the visible acronym. - -In both cases, utilizing the `id` attribute allows you to deep link to the definition, providing users with quick access. - - - -## dl - - - -> The HTML `
` element represents a description list. The element encloses a list of groups of terms (specified using the `
` element) and descriptions (provided by `
` elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs). - MDN - -### Accessibility - -Screen readers announce `
` content differently - some may not indicate that the content is a list. To improve usability make sure each list item's content communicates its relationship to other list items. - - - -
-
-

Gentlemen of the Mushroom Kingdon

-
-
Mario
-
red hat, older twin brother, classic mustache
-
Luigi
-
green hat, younger twin brother, classic mustache
-
Wario
-
yellow hat, not a twin, kinked mustache
-
loves garlic
-
Waluigi
-
purple hat, not a twin, pointy mustache
-
-
- -```html -

Gentlemen of the Mushroom Kingdon

-
-
Mario
-
red hat, older twin brother, classic mustache
-
Luigi
-
green hat, younger twin brother, classic mustache
-
Wario
-
yellow hat, not a twin, kinked mustache
-
loves garlic
-
Waluigi
-
purple hat, not a twin, pointy mustache
-
-``` - -
- -## em - - - -> The HTML `` element marks text that has stress emphasis. The `` element can be nested, with each level of nesting indicating a greater degree of emphasis. - MDN - - - -
-
-

Do you really want to see that movie?

-
- -```html -

Do you really want to see that movie?

-``` - -
- -You can also nest `em` tags to provide an added level of emphasis. Doing so will provide additional style. - -
-
-

Do you really, really want to see that movie?

-
- -```html -

- Do you really, really want to see that movie? -

-``` - -
- -## figure & figcaption - - - -> The HTML `
` (Figure With Optional Caption) element represents self-contained content, potentially with an optional caption, which is specified using the (`
`) element. The figure, its caption, and its contents are referenced as a single unit. - MDN - - - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - -
"Homer" by Joe Jezowski. California, 2020
-
-
- -```html -
- 🍩 -
"Homer" by Joe Jezowski. California, 2020
-
-``` - -
- -### Usage - - - -`
` is appropriate for supplemental content - standard examples include supporting images, diagrams, and code snippets. Please include a `
` to ensure your content has appropriate context. - - - -## hr - - - -> The HTML `
` element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section. - MDN - -
- -
-
-

This is the first paragraph.

-
-

This is the second paragraph.

-
- -```html -

This is the first paragraph.

-
-

This is the second paragraph.

-``` - -
- -## ins - - - -> The HTML `` element represents a range of text that has been added to a document. You can use the `` element to similarly represent a range of text that has been deleted from the document. - MDN - -### Accessibility - -Many screen readers do not let users know of the presence of `ins`. To fix this, you should consider using `data-a11y-start` and `data-a11y-end`, prepend and append assistive text to the contents of the tag. In the above example, there are additional spaces before and after the text, this is intentional. Not adding these spaces will cause the content within the tag to run into the text within the tag. - - - -
-
-

“You're late!”

- -

“I apologize for the delay.”

-
- -

“A wizard is never late …”

-
-
- -```html -

“You're late!”

- -

“I apologize for the delay.”

-
- -

“A wizard is never late …”

-
-``` - -
- -## kbd - - - -> The HTML Keyboard Input element (``) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a `` element using its default monospace font, although this is not mandated by the HTML standard. - MDN - -
-
-

Pressing tab will take you to the next focusable element on the page.

-
- -```html -

- Pressing tab will take you to the next focusable element on the - page. -

-``` - -
- -### Usage - -When combined with ``, the background of this element will swap to white for better contrast. - -
- -## mark - - - -> The HTML Mark Text element (``) represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context. - MDN - - - -
-
-

Search results for "Button":

-
-
    -
  • Button labels should clearly indicate what action the user is taking, e.g. "Add User" instead of "Submit".
  • -
  • Please follow normal Button variant guidelines within tables.
  • -
-
- -```html -

Search results for "Button":

-
-
    -
  • - Button labels should clearly indicate what action the user is - taking, e.g. "Add User" instead of "Submit". -
  • -
  • - Please follow normal Button variant guidelines within tables. -
  • -
-``` - -
- -## output - -> The HTML Output element (``) is a container element into which a site or app can inject the results of a calculation or the outcome of a user action. - MDN - -### Usage - -Odyssey does not currently provide styling for ``, but using it correctly will help improve accessibility for your users. - -The most common use case is for diplaying computed values in a form: - -
-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - 24 -
-
-
-
- -```html -
-
-
- - -
-
-
-
- - -
-
-
-
- - 24 -
-
-
-``` - -
- -### Accessibility - -While many browsers automatically treat `` as a "live" region, it's best to include `aria-live="polite"` to ensure best-case functionality. Though it is not well documented, `` can and should utilize a paired `