Merge branch 'master' into refactor/esm5

* master: build: publish fix(datepicker): closes on click outside resolves #1655 (#1700) tagsinput: fix scroll bar position when items/pills overflow (#1702) flexibility: remove base from color scale & add parseToRgb (#1696) fix(searchinput): weird type bug resolved (#1698) feat(core): temp core util for refactoring to vanillia css (#1689) build: publish select: stop intercepting all key events (#1699) build: publish fix(storybook-addon-theme): update incorrect package name in README feat(storybook-addon-theme): update icon to circle feat(storybook-addon-theme): ability to set theme per-story util: polymorphic primatives (#1690) build: publish fix(select): dropdown zindex added (#1691) Update @pluralsight/ps-design-system-storybook-addon-theme package.json for addon-catalog Update @pluralsight/ps-design-system-storybook-addon-center package.json for addon-catalog
pluralsight · Apr 7, 2021 · fac6c8c · fac6c8c
2 parents 05e7542 + e77c8e3
commit fac6c8c
Show file tree

Hide file tree

Showing 189 changed files with 3,703 additions and 972 deletions.
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.24.0](https://github.com/pluralsight/design-system/compare/@pluralsight/ps-design-system-docs@0.23.3...@pluralsight/ps-design-system-docs@0.24.0) (2021-04-05)
+
+
+### flexibility
+
+* remove base from color scale & add parseToRgb ([#1696](https://github.com/pluralsight/design-system/issues/1696)) ([b5abe62](https://github.com/pluralsight/design-system/commit/b5abe62c164f47cde093b6fce1381af2cb47e21e))
+
+
+### BREAKING CHANGES
+
+* update color.base usages to color[6]
+
+* feat(core): remove colorsBackgroundUtility.base update parseToRgb()
+* switch colorsBackgroundUtility.base usage to
+
+* feat(core): adds colorsBackgroundUtilityCsv
+
+* test(core): update snapshot
+
+
+
+
+
+## [0.23.3](https://github.com/pluralsight/design-system/compare/@pluralsight/ps-design-system-docs@0.23.2...@pluralsight/ps-design-system-docs@0.23.3) (2021-03-31)
+
+**Note:** Version bump only for package @pluralsight/ps-design-system-docs
+
+
+
+
+
+## [0.23.2](https://github.com/pluralsight/design-system/compare/@pluralsight/ps-design-system-docs@0.23.1...@pluralsight/ps-design-system-docs@0.23.2) (2021-03-26)
+
+**Note:** Version bump only for package @pluralsight/ps-design-system-docs
+
+
+
+
+
 ## [0.23.1](https://github.com/pluralsight/design-system/compare/@pluralsight/ps-design-system-docs@0.23.0...@pluralsight/ps-design-system-docs@0.23.1) (2021-03-23)
 
 **Note:** Version bump only for package @pluralsight/ps-design-system-docs

diff --git a/docs/package.json b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pluralsight/ps-design-system-docs",
-  "version": "0.23.1",
+  "version": "0.24.0",
   "description": "Reference site",
   "license": "Apache-2.0",
   "private": true,
@@ -27,63 +27,63 @@
     "@github-docs/frontmatter": "^1.3.1",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@pluralsight/ps-design-system-actionmenu": "^16.2.3",
-    "@pluralsight/ps-design-system-appframe": "^3.0.6",
-    "@pluralsight/ps-design-system-avatar": "^7.1.6",
-    "@pluralsight/ps-design-system-badge": "^11.1.6",
-    "@pluralsight/ps-design-system-banner": "^9.0.6",
-    "@pluralsight/ps-design-system-breadcrumb": "^10.0.6",
-    "@pluralsight/ps-design-system-button": "^21.0.6",
-    "@pluralsight/ps-design-system-card": "^16.0.6",
-    "@pluralsight/ps-design-system-carousel": "^11.2.6",
-    "@pluralsight/ps-design-system-checkbox": "^7.1.6",
-    "@pluralsight/ps-design-system-circularprogress": "^8.1.7",
-    "@pluralsight/ps-design-system-core": "^6.9.2",
-    "@pluralsight/ps-design-system-datawell": "^5.1.6",
-    "@pluralsight/ps-design-system-datepicker": "^14.1.2",
-    "@pluralsight/ps-design-system-dialog": "^11.0.6",
-    "@pluralsight/ps-design-system-drawer": "^10.0.7",
-    "@pluralsight/ps-design-system-dropdown": "^11.2.3",
-    "@pluralsight/ps-design-system-emptystate": "^12.0.6",
-    "@pluralsight/ps-design-system-errors": "^11.0.6",
+    "@pluralsight/ps-design-system-actionmenu": "^16.2.5",
+    "@pluralsight/ps-design-system-appframe": "^4.0.0",
+    "@pluralsight/ps-design-system-avatar": "^8.0.0",
+    "@pluralsight/ps-design-system-badge": "^11.1.9",
+    "@pluralsight/ps-design-system-banner": "^9.0.9",
+    "@pluralsight/ps-design-system-breadcrumb": "^10.0.9",
+    "@pluralsight/ps-design-system-button": "^21.0.8",
+    "@pluralsight/ps-design-system-card": "^17.0.0",
+    "@pluralsight/ps-design-system-carousel": "^11.2.8",
+    "@pluralsight/ps-design-system-checkbox": "^8.0.0",
+    "@pluralsight/ps-design-system-circularprogress": "^8.1.9",
+    "@pluralsight/ps-design-system-core": "^7.0.0",
+    "@pluralsight/ps-design-system-datawell": "^5.1.8",
+    "@pluralsight/ps-design-system-datepicker": "^14.1.4",
+    "@pluralsight/ps-design-system-dialog": "^12.0.0",
+    "@pluralsight/ps-design-system-drawer": "^10.0.9",
+    "@pluralsight/ps-design-system-dropdown": "^11.2.5",
+    "@pluralsight/ps-design-system-emptystate": "^12.0.8",
+    "@pluralsight/ps-design-system-errors": "^11.0.8",
     "@pluralsight/ps-design-system-featureflags": "^3.0.1",
-    "@pluralsight/ps-design-system-field": "^2.1.3",
-    "@pluralsight/ps-design-system-form": "^11.1.3",
-    "@pluralsight/ps-design-system-icon": "^21.0.6",
-    "@pluralsight/ps-design-system-layout": "^9.0.6",
-    "@pluralsight/ps-design-system-linearprogress": "^6.1.8",
-    "@pluralsight/ps-design-system-link": "^11.1.6",
-    "@pluralsight/ps-design-system-menu": "^1.0.2",
-    "@pluralsight/ps-design-system-multiselect": "^1.2.4",
-    "@pluralsight/ps-design-system-navbar": "^3.0.6",
-    "@pluralsight/ps-design-system-navbrand": "^2.1.6",
-    "@pluralsight/ps-design-system-navcookiebanner": "^2.1.7",
-    "@pluralsight/ps-design-system-navitem": "^3.0.6",
-    "@pluralsight/ps-design-system-navuser": "^2.1.6",
-    "@pluralsight/ps-design-system-normalize": "^4.3.2",
-    "@pluralsight/ps-design-system-note": "^8.1.7",
-    "@pluralsight/ps-design-system-position": "^6.1.7",
-    "@pluralsight/ps-design-system-radio": "^8.1.7",
-    "@pluralsight/ps-design-system-row": "^13.0.6",
-    "@pluralsight/ps-design-system-screenreaderonly": "^3.1.7",
-    "@pluralsight/ps-design-system-scrollable": "^4.1.6",
-    "@pluralsight/ps-design-system-searchinput": "^8.0.7",
-    "@pluralsight/ps-design-system-starrating": "^8.0.6",
-    "@pluralsight/ps-design-system-steps": "^2.1.7",
-    "@pluralsight/ps-design-system-switch": "^7.1.6",
-    "@pluralsight/ps-design-system-tab": "^17.1.7",
-    "@pluralsight/ps-design-system-table": "^13.1.3",
-    "@pluralsight/ps-design-system-tag": "^9.0.6",
-    "@pluralsight/ps-design-system-tagsinput": "^1.2.3",
-    "@pluralsight/ps-design-system-text": "^18.2.2",
-    "@pluralsight/ps-design-system-textarea": "^8.1.7",
-    "@pluralsight/ps-design-system-textinput": "^10.1.7",
-    "@pluralsight/ps-design-system-theme": "^7.1.6",
-    "@pluralsight/ps-design-system-tooltip": "^7.1.6",
-    "@pluralsight/ps-design-system-typeahead": "^7.1.7",
-    "@pluralsight/ps-design-system-util": "^7.3.0",
-    "@pluralsight/ps-design-system-verticaltabs": "^6.0.6",
-    "@pluralsight/ps-design-system-viewtoggle": "^7.1.7",
+    "@pluralsight/ps-design-system-field": "^3.0.0",
+    "@pluralsight/ps-design-system-form": "^11.1.5",
+    "@pluralsight/ps-design-system-icon": "^22.0.0",
+    "@pluralsight/ps-design-system-layout": "^10.0.0",
+    "@pluralsight/ps-design-system-linearprogress": "^7.0.0",
+    "@pluralsight/ps-design-system-link": "^11.1.8",
+    "@pluralsight/ps-design-system-menu": "^1.0.5",
+    "@pluralsight/ps-design-system-multiselect": "^1.2.6",
+    "@pluralsight/ps-design-system-navbar": "^4.0.0",
+    "@pluralsight/ps-design-system-navbrand": "^3.0.0",
+    "@pluralsight/ps-design-system-navcookiebanner": "^2.1.9",
+    "@pluralsight/ps-design-system-navitem": "^4.0.0",
+    "@pluralsight/ps-design-system-navuser": "^3.0.0",
+    "@pluralsight/ps-design-system-normalize": "^4.4.1",
+    "@pluralsight/ps-design-system-note": "^9.0.0",
+    "@pluralsight/ps-design-system-position": "^7.0.0",
+    "@pluralsight/ps-design-system-radio": "^9.0.0",
+    "@pluralsight/ps-design-system-row": "^14.0.0",
+    "@pluralsight/ps-design-system-screenreaderonly": "^3.1.9",
+    "@pluralsight/ps-design-system-scrollable": "^4.1.8",
+    "@pluralsight/ps-design-system-searchinput": "^8.0.9",
+    "@pluralsight/ps-design-system-starrating": "^9.0.0",
+    "@pluralsight/ps-design-system-steps": "^3.0.0",
+    "@pluralsight/ps-design-system-switch": "^8.0.0",
+    "@pluralsight/ps-design-system-tab": "^17.1.9",
+    "@pluralsight/ps-design-system-table": "^14.0.0",
+    "@pluralsight/ps-design-system-tag": "^9.0.8",
+    "@pluralsight/ps-design-system-tagsinput": "^1.2.5",
+    "@pluralsight/ps-design-system-text": "^19.0.0",
+    "@pluralsight/ps-design-system-textarea": "^8.1.9",
+    "@pluralsight/ps-design-system-textinput": "^10.1.9",
+    "@pluralsight/ps-design-system-theme": "^7.1.8",
+    "@pluralsight/ps-design-system-tooltip": "^7.1.8",
+    "@pluralsight/ps-design-system-typeahead": "^8.0.0",
+    "@pluralsight/ps-design-system-util": "^8.0.0",
+    "@pluralsight/ps-design-system-verticaltabs": "^6.0.8",
+    "@pluralsight/ps-design-system-viewtoggle": "^7.1.10",
     "body-parser": "^1.19.0",
     "bunyan": "^1.8.15",
     "dotenv": "^8.2.0",

diff --git a/docs/src/content/components/nav.mdx b/docs/src/content/components/nav.mdx
@@ -132,9 +132,9 @@ function Filler(props) {
           display: flex;
           align-items: center;
           justify-content: center;
-          color: ${colorsPink.base};
+          color: ${colorsPink[6]};
           height: 100%;
-          border: 2px dashed ${colorsPink.base};
+          border: 2px dashed ${colorsPink[6]};
           padding: 0 ${layout.spacingMedium};
         }
       `}</style>

diff --git a/docs/src/content/core/color.mdx b/docs/src/content/core/color.mdx
@@ -17,7 +17,7 @@ Colors are available from the core package. Colors are usable in CSS:
 @import '@pluralsight/ps-design-system-core';
 
 .mySelector {
-  color: var(--psColorsBlueBase);
+  color: var(--psColorsBlue6);
 }
 ```
 
@@ -30,7 +30,7 @@ import {
 } from '@pluralsight/ps-design-system-core'
 
 myCssInJsSolution({
-  color: colorsBlue.base
+  color: colorsBlue[6]
 })
 ```
 
@@ -50,7 +50,7 @@ Light
 
 Use utility color with transparency to lighten or darken backgrounds beyond the three colors provided.
 
-Utility base color
+Utility base coma seperated values
 
 <Colors id="utilityBase" />
 
@@ -106,7 +106,7 @@ On light backgrounds
 
 ## All colors
 
-These are additional colors beyond the core set. They can be used for things like illustrations, complex data visualizations, etc. Colors numbered 6 are the same as base colors. (e.g., `psColorsBlue6` has the same value as `psColorsBlueBase`)
+These are additional colors beyond the core set. They can be used for things like illustrations, complex data visualizations, etc.
 
 <Colors id="blue" />
 

diff --git a/docs/src/content/core/color/index.tsx b/docs/src/content/core/color/index.tsx
@@ -79,10 +79,10 @@ const colors: Record<string, SubCategory> = {
     colors: [
       {
         name: 'Utility',
-        var: 'psColorsBackgroundUtilityBase',
-        js: 'colorsBackgroundUtility.base',
-        bg: core.colorsBackgroundUtility.base,
-        hex: core.colorsBackgroundUtility.base + ' / rgba(138, 153, 168, 1)'
+        var: 'psColorsBackgroundUtilityCsv',
+        js: 'colorsBackgroundUtilityCsv',
+        bg: `rgb(${core.colorsBackgroundUtilityCsv})`,
+        hex: 'N/A (138,153,168)'
       }
     ]
   },
@@ -527,7 +527,7 @@ function formatAllColorSubCategory({
       .map(key => parseInt(key, 10))
       .filter(key => Number.isInteger(key))
       .map(key => ({
-        name: name + ' ' + key + (key === 6 ? ' (Base)' : ''),
+        name: name + ' ' + key,
         var: 'psColors' + name + key,
         hex: color[key],
         js: `colors${name}[${key}]`,