@pingux/astro 2.151.0 → 2.151.1-alpha.0

package/lib/styles/themes/next-gen/codeView/codeView.js

@@ -1,7 +1,20 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _context;
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var nextGenCodeViewTheme = {
   plain: {
-    color: '#f8f8f2',
-    backgroundColor: '#23282e'
+    color: '#999999',
+    backgroundColor: 'codeEditor.backgroundColor'
   },
   styles: [{
     types: ['comment', 'prolog', 'doctype', 'cdata'],
@@ -57,9 +70,9 @@ var nextGenCodeViewTheme = {
   }]
 };
 var nextGenCodeViewWrapper = {
-  backgroundColor: 'gray-900',
+  backgroundColor: 'codeEditor.backgroundColor',
   border: '1px solid',
-  borderColor: 'gray-900',
+  borderColor: 'codeEditor.headerColor',
   borderRadius: '4px',
   width: 400,
   height: 200,
@@ -111,11 +124,12 @@ var nextGenCodeViewWrapper = {
   }
 };
 var nextGenCodeViewHeader = {
-  color: 'gray-300',
+  backgroundColor: 'codeEditor.headerColor',
+  color: 'font.reverse',
   px: 'md',
   width: '100%',
-  border: '1px solid',
-  borderColor: 'gray-800',
+  borderBottom: '1px solid',
+  borderBottomColor: 'gray-800',
   lineHeight: 'body'
 };
 var lineNo = {
@@ -125,19 +139,94 @@ var lineNo = {
   m: '0 10px 0 0',
   bg: 'accent.30',
   minWidth: 26,
-  color: 'white',
-  lineHeight: '20px'
+  color: '#93A1A1',
+  lineHeight: '20px',
+  backgroundColor: 'transparent'
 };
 export var copyButton = {
-  mx: 'sm',
-  path: {
-    fill: 'text.primary'
+  "default": {
+    mx: 'sm',
+    path: {
+      fill: 'font.reverse'
+    },
+    border: 'none !important'
   },
-  border: 'none !important'
+  light: {
+    mx: 'sm',
+    path: {
+      fill: '#23282f'
+    },
+    border: 'none !important'
+  }
 };
-export default {
+var codeView = {
   theme: nextGenCodeViewTheme,
   wrapper: nextGenCodeViewWrapper,
   lineNo: lineNo,
-  header: nextGenCodeViewHeader
+  header: nextGenCodeViewHeader,
+  copyButton: copyButton
+};
+var light = _objectSpread(_objectSpread({}, codeView), {}, {
+  theme: _objectSpread(_objectSpread({}, nextGenCodeViewTheme), {}, {
+    styles: _concatInstanceProperty(_context = []).call(_context, nextGenCodeViewTheme.styles, [{
+      types: ['comment', 'prolog', 'doctype', 'cdata'],
+      style: {
+        color: '#94a0a0'
+      }
+    }, {
+      types: ['deleted', 'property', 'tag', 'boolean', 'number', 'constant', 'symbol'],
+      style: {
+        color: '#99329f'
+      }
+    }, {
+      types: ['inserted', 'selector', 'string', 'char', 'builtin', 'inserted', 'attr-name'],
+      style: {
+        color: '#63a058'
+      }
+    }, {
+      types: ['operator', 'entity', 'url', 'language-css', 'style'],
+      style: {
+        color: '#a67f35',
+        background: 'transparent'
+      }
+    }, {
+      types: ['atrule', 'attr-value', 'keyword'],
+      style: {
+        color: '#99329f'
+      }
+    }, {
+      types: ['function'],
+      style: {
+        color: '#4e76ea'
+      }
+    }, {
+      types: ['regex', 'important', 'variable'],
+      style: {
+        color: '#f07178'
+      }
+    }, {
+      types: ['important', 'bold'],
+      style: {
+        fontWeight: 'bold'
+      }
+    }, {
+      types: ['entity'],
+      style: {
+        cursor: 'help'
+      }
+    }])
+  }),
+  wrapper: _objectSpread(_objectSpread({}, nextGenCodeViewWrapper), {}, {
+    backgroundColor: '#f7f8fa',
+    borderColor: '#f7f8fa'
+  }),
+  header: _objectSpread(_objectSpread({}, nextGenCodeViewHeader), {}, {
+    backgroundColor: '#f7f8fa',
+    borderBottomColor: '#e6edf5',
+    color: '#23282f'
+  })
+});
+export default {
+  "default": codeView,
+  light: light
 };

package/lib/styles/themes/next-gen/colors/colors.js

@@ -116,6 +116,10 @@ var badge = {
   textColor: nextGenColors.font.base,
   background: nextGenColors['gray-100']
 };
+var codeEditor = {
+  backgroundColor: nextGenColors['gray-900'],
+  headerColor: nextGenColors['gray-900']
+};
 var tooltip = 'black';
 var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), nextGenColors), overrides), {}, {
   badge: badge,
@@ -136,6 +140,7 @@ var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColo
   backgroundHover: backgroundHover,
   iconWrapper: iconWrapper,
   tooltip: tooltip,
+  codeEditor: codeEditor,
   twoTone: twoTone
 });
 export default colors;

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -14,6 +14,7 @@ export var astroBlacklistStory = {
   NavBar: ['Onyx Default'],
   SearchField: ['Onyx With Filter'],
   Callout: ['Customizations'],
+  CodeView: ['Light'],
   StatusIcon: ['Default', 'In Rocker Button'],
   Avatar: ['With Size Variation', 'With Color Variation', 'With Icon Variation', 'With Square Variation'],
   Text: ['Onyx'],

package/lib/styles/themes/next-gen/tokens/colorTokens.js

@@ -121,7 +121,8 @@ export var nextGenColors = {
     'base': '#23282e',
     'light': '#5e6d82',
     'link': '#1a73e8',
-    'label': '#5e6d82'
+    'label': '#5e6d82',
+    'reverse': '#ffffff'
   },
   'active': '#1a73e8',
   'active_hover': '#1462C8',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.151.0",
+  "version": "2.151.1-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",