Odyssey 0.2.0 (#512)

* Adds abbr, address, code, hr, keyboard and variable styled elements t… (#452) * Adds abbr, address, code, hr, keyboard and variable styled elements to glossary. Alphabetizes glossary items * PR fixes * PR Feedback * Renames building blocks to foundations in docs nav (#453) * - fixes Table cell overflow bug * Adds 0.1.3 to CHANGELOG (#470) * adds 0.13 changelog * update changelog * Sync release 0.1.3 master > develop (#486) * Updates codeowners (#467) * Release/0.1.3 (#471) * Adds abbr, address, code, hr, keyboard and variable styled elements t… (#452) * Adds abbr, address, code, hr, keyboard and variable styled elements to glossary. Alphabetizes glossary items * PR fixes * PR Feedback * Renames building blocks to foundations in docs nav (#453) * - fixes Table cell overflow bug * Adds 0.1.3 to CHANGELOG (#470) * adds 0.13 changelog * update changelog * bump version * Update elements doc examples (#482) * update styled elements examples * update CHANGELOG Co-authored-by: Edbury Enegren <edbury.enegren@okta.com> * Fix merge conflict in changelog Co-authored-by: Jordan Melberg <jordan.melberg@okta.com> Co-authored-by: Edbury Enegren <edbury.enegren@okta.com> * Release Sync 0.1.3 (#487) * (docs): fixed small typo error * Component: Tabs (#484) * adds tab component * adds outline mixin, updates all places with focus outlines * updates tab documentation * fix linter error * update tab docs * update tab docs, CSS * update tab indicator transition * adds 'don't' around Icon usage in a tab button * feat(component)!: adds status component this commit adds both the docs and styling for Status BREAKING CHANGE: "yellow"/"alert" semantic hue is now "caution" * Rename foundations to base in docs (#499) * feat(component): adds Tag styling and documentation * adds 0.2.0 changelog, bumps Odyssey version numbers in package.json's and lerna.json * update 0.2.0 changelog * chore: adds missing licenses * - fix(docs): use sentence casing for status * adds explicit color to .ods-tabs--tab button element (#515) Co-authored-by: Edbury Enegren <edbury.enegren@okta.com> Co-authored-by: Jordan Melberg <jordan.melberg@okta.com> Co-authored-by: 0xflotus <0xflotus@gmail.com> Co-authored-by: Joe Jezowski <49886075+joejezowski-okta@users.noreply.github.com>
okta · Apr 30, 2020 · 691539e · 691539e
1 parent 2ff125b
commit 691539e
Show file tree

Hide file tree

Showing 43 changed files with 1,763 additions and 37 deletions.
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.1.3",
+  "version": "0.2.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": [

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@okta/design-docs",
   "description": "Design System Docs",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "hexo": {
     "version": "3.9.0"
   },
@@ -23,7 +23,7 @@
     "last 2 versions"
   ],
   "devDependencies": {
-    "@okta/odyssey": "^0.1.3",
+    "@okta/odyssey": "^0.2.0",
     "choices.js": "^9.0.1",
     "hexo": "^3.2.0",
     "hexo-autoprefixer": "^2.0.0",

diff --git a/packages/docs/source/_data/nav.yml b/packages/docs/source/_data/nav.yml
@@ -5,12 +5,12 @@
   'UI status': '/getting-started/status.html'
   'Changelog': '/getting-started/changelog.html'
 
-'Foundations':
-  'color': '/foundations/color.html'
-  #'iconography': '/foundations/iconography.html'
-  'spacing': '/foundations/spacing.html'
-  'type': '/foundations/type.html'
-  'elements': '/foundations/elements.html'
+'Base':
+  'color': '/base/color.html'
+  #'iconography': '/base/iconography.html'
+  'spacing': '/base/spacing.html'
+  'type': '/base/type.html'
+  'elements': '/base/elements.html'
 
 'components':
   # Needs Docs  'banner': '/components/banner.html'
@@ -26,8 +26,11 @@
   #'navigation': '/components/navigation.html'
   'radio button': '/components/radio-button.html'
   'select': '/components/select.html'
+  'status': '/components/status.html'
   #'switch': '/components/switch.html'
+  'tab': '/components/tab.html'
   'table': '/components/table.html'
+  'tag': '/components/tag.html'
   #'toast': '/components/toast.html'
   #'top bar': '/components/top-bar.html'
   'text input': '/components/text-input.html'

diff --git a/packages/docs/source/base/color.md b/packages/docs/source/base/color.md
@@ -0,0 +1,75 @@
+# Color
+<div class="is-not-provisional">
+
+These foundations are only available in the draft spec.
+
+</div>
+
+<div class="is-provisional">
+
+<section class="sample--colors-wrap">
+  <ul class="sample--color-list">
+    <li class="sample--color is-sample-success-lightest"></li>
+    <li class="sample--color is-sample-success-base"></li>
+    <li class="sample--color is-sample-success-dark"></li>
+  </ul>
+
+  <ul class="sample--color-list">
+    <li class="sample--color is-sample-action-lightest"></li>
+    <li class="sample--color is-sample-action-base"></li>
+    <li class="sample--color is-sample-action-dark"></li>
+  </ul>
+
+  <ul class="sample--color-list">
+    <li class="sample--color is-sample-danger-lightest"></li>
+    <li class="sample--color is-sample-danger-base"></li>
+    <li class="sample--color is-sample-danger-dark"></li>
+  </ul>
+</section>
+
+The current palette is constrained to three shades per hue. Use <strong>lightest</strong> variants to highlight specific states in typically-white backgrounds (e.g. a Text Input might have a `cv('danger', 'lightest')` background during an error state. The <strong>base</strong> variant can be treated as a safe default. <strong>Dark</strong> shades should be used for `:hover`-esque  states or to increase contrast.
+
+## Semantic hues
+
+Every selection from our palette should communicate meaning, not just be used for decoration.
+
+### Success
+
+Use our "Success" green sparingly. It should indicate positive feedback to the user in the form of detailing.
+
+It should never be used as a text color, as it is not AA compliant.
+
+### Action
+
+"Action" blue is our primary color. It indicates actionable and active states in interactive components.
+
+### Danger
+
+"Danger" red is used to highlight UI elements that require critical attention - both in the cases of errors or potentially destructive actions.
+
+## Grays
+
+<ul class="sample--color-list">
+  <li class="sample--color is-sample-gray-000"></li>
+  <li class="sample--color is-sample-gray-100"></li>
+  <li class="sample--color is-sample-gray-200"></li>
+  <li class="sample--color is-sample-gray-300"></li>
+  <li class="sample--color is-sample-gray-400"></li>
+  <li class="sample--color is-sample-gray-500"></li>
+  <li class="sample--color is-sample-gray-600"></li>
+  <li class="sample--color is-sample-gray-700"></li>
+  <li class="sample--color is-sample-gray-800"></li>
+  <li class="sample--color is-sample-gray-900"></li>
+</ul>
+
+We have a large selection of grays available for use. We've currently standardized around a few shades:
+
+```scss
+$text-body: cv('gray', '900');
+$text-heading: cv('gray', '900');
+$text-sub: cv('gray', '500');
+
+$base-border-color: cv('gray', '300');
+```
+
+</div>