@pingux/astro 2.151.0 → 2.151.1-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/lib/cjs/components/CodeView/CodeView.js +14 -10
  2. package/lib/cjs/components/CodeView/CodeView.stories.d.ts +1 -0
  3. package/lib/cjs/components/CodeView/CodeView.stories.js +17 -1
  4. package/lib/cjs/components/CodeView/CodeView.styles.d.ts +79 -77
  5. package/lib/cjs/components/CodeView/CodeView.styles.js +5 -3
  6. package/lib/cjs/components/CopyText/CopyButton.js +9 -3
  7. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.d.ts +10 -0
  8. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.js +13 -1
  9. package/lib/cjs/styles/themes/next-gen/codeView/codeView.d.ts +252 -92
  10. package/lib/cjs/styles/themes/next-gen/codeView/codeView.js +104 -15
  11. package/lib/cjs/styles/themes/next-gen/colors/colors.d.ts +5 -0
  12. package/lib/cjs/styles/themes/next-gen/colors/colors.js +5 -0
  13. package/lib/cjs/styles/themes/next-gen/convertedComponentList.d.ts +1 -0
  14. package/lib/cjs/styles/themes/next-gen/convertedComponentList.js +1 -0
  15. package/lib/cjs/styles/themes/next-gen/next-gen.d.ts +496 -180
  16. package/lib/cjs/styles/themes/next-gen/tokens/colorTokens.d.ts +1 -0
  17. package/lib/cjs/styles/themes/next-gen/tokens/colorTokens.js +2 -1
  18. package/lib/cjs/styles/themes/next-gen/variants/button.d.ts +13 -4
  19. package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts +239 -88
  20. package/lib/components/CodeView/CodeView.js +14 -10
  21. package/lib/components/CodeView/CodeView.stories.js +15 -0
  22. package/lib/components/CodeView/CodeView.styles.js +5 -3
  23. package/lib/components/CopyText/CopyButton.js +9 -3
  24. package/lib/styles/themeOverrides/nextGenDarkMode/colors.js +13 -1
  25. package/lib/styles/themes/next-gen/codeView/codeView.js +104 -15
  26. package/lib/styles/themes/next-gen/colors/colors.js +5 -0
  27. package/lib/styles/themes/next-gen/convertedComponentList.js +1 -0
  28. package/lib/styles/themes/next-gen/tokens/colorTokens.js +2 -1
  29. package/package.json +1 -1
@@ -1,7 +1,20 @@
1
+ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
2
+ import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3
+ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
4
+ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
5
+ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
6
+ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
7
+ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
8
+ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
9
+ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
10
+ var _context;
11
+ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
12
+ 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; }
13
+ 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; }
1
14
  var nextGenCodeViewTheme = {
2
15
  plain: {
3
- color: '#f8f8f2',
4
- backgroundColor: '#23282e'
16
+ color: '#999999',
17
+ backgroundColor: 'codeEditor.backgroundColor'
5
18
  },
6
19
  styles: [{
7
20
  types: ['comment', 'prolog', 'doctype', 'cdata'],
@@ -57,9 +70,9 @@ var nextGenCodeViewTheme = {
57
70
  }]
58
71
  };
59
72
  var nextGenCodeViewWrapper = {
60
- backgroundColor: 'gray-900',
73
+ backgroundColor: 'codeEditor.backgroundColor',
61
74
  border: '1px solid',
62
- borderColor: 'gray-900',
75
+ borderColor: 'codeEditor.headerColor',
63
76
  borderRadius: '4px',
64
77
  width: 400,
65
78
  height: 200,
@@ -111,11 +124,12 @@ var nextGenCodeViewWrapper = {
111
124
  }
112
125
  };
113
126
  var nextGenCodeViewHeader = {
114
- color: 'gray-300',
127
+ backgroundColor: 'codeEditor.headerColor',
128
+ color: 'font.reverse',
115
129
  px: 'md',
116
130
  width: '100%',
117
- border: '1px solid',
118
- borderColor: 'gray-800',
131
+ borderBottom: '1px solid',
132
+ borderBottomColor: 'gray-800',
119
133
  lineHeight: 'body'
120
134
  };
121
135
  var lineNo = {
@@ -125,19 +139,94 @@ var lineNo = {
125
139
  m: '0 10px 0 0',
126
140
  bg: 'accent.30',
127
141
  minWidth: 26,
128
- color: 'white',
129
- lineHeight: '20px'
142
+ color: '#93A1A1',
143
+ lineHeight: '20px',
144
+ backgroundColor: 'transparent'
130
145
  };
131
146
  export var copyButton = {
132
- mx: 'sm',
133
- path: {
134
- fill: 'text.primary'
147
+ "default": {
148
+ mx: 'sm',
149
+ path: {
150
+ fill: 'font.reverse'
151
+ },
152
+ border: 'none !important'
135
153
  },
136
- border: 'none !important'
154
+ light: {
155
+ mx: 'sm',
156
+ path: {
157
+ fill: '#23282f'
158
+ },
159
+ border: 'none !important'
160
+ }
137
161
  };
138
- export default {
162
+ var codeView = {
139
163
  theme: nextGenCodeViewTheme,
140
164
  wrapper: nextGenCodeViewWrapper,
141
165
  lineNo: lineNo,
142
- header: nextGenCodeViewHeader
166
+ header: nextGenCodeViewHeader,
167
+ copyButton: copyButton
168
+ };
169
+ var light = _objectSpread(_objectSpread({}, codeView), {}, {
170
+ theme: _objectSpread(_objectSpread({}, nextGenCodeViewTheme), {}, {
171
+ styles: _concatInstanceProperty(_context = []).call(_context, nextGenCodeViewTheme.styles, [{
172
+ types: ['comment', 'prolog', 'doctype', 'cdata'],
173
+ style: {
174
+ color: '#94a0a0'
175
+ }
176
+ }, {
177
+ types: ['deleted', 'property', 'tag', 'boolean', 'number', 'constant', 'symbol'],
178
+ style: {
179
+ color: '#99329f'
180
+ }
181
+ }, {
182
+ types: ['inserted', 'selector', 'string', 'char', 'builtin', 'inserted', 'attr-name'],
183
+ style: {
184
+ color: '#63a058'
185
+ }
186
+ }, {
187
+ types: ['operator', 'entity', 'url', 'language-css', 'style'],
188
+ style: {
189
+ color: '#a67f35',
190
+ background: 'transparent'
191
+ }
192
+ }, {
193
+ types: ['atrule', 'attr-value', 'keyword'],
194
+ style: {
195
+ color: '#99329f'
196
+ }
197
+ }, {
198
+ types: ['function'],
199
+ style: {
200
+ color: '#4e76ea'
201
+ }
202
+ }, {
203
+ types: ['regex', 'important', 'variable'],
204
+ style: {
205
+ color: '#f07178'
206
+ }
207
+ }, {
208
+ types: ['important', 'bold'],
209
+ style: {
210
+ fontWeight: 'bold'
211
+ }
212
+ }, {
213
+ types: ['entity'],
214
+ style: {
215
+ cursor: 'help'
216
+ }
217
+ }])
218
+ }),
219
+ wrapper: _objectSpread(_objectSpread({}, nextGenCodeViewWrapper), {}, {
220
+ backgroundColor: '#f7f8fa',
221
+ borderColor: '#f7f8fa'
222
+ }),
223
+ header: _objectSpread(_objectSpread({}, nextGenCodeViewHeader), {}, {
224
+ backgroundColor: '#f7f8fa',
225
+ borderBottomColor: '#e6edf5',
226
+ color: '#23282f'
227
+ })
228
+ });
229
+ export default {
230
+ "default": codeView,
231
+ light: light
143
232
  };
@@ -116,6 +116,10 @@ var badge = {
116
116
  textColor: nextGenColors.font.base,
117
117
  background: nextGenColors['gray-100']
118
118
  };
119
+ var codeEditor = {
120
+ backgroundColor: nextGenColors['gray-900'],
121
+ headerColor: nextGenColors['gray-900']
122
+ };
119
123
  var tooltip = 'black';
120
124
  var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), nextGenColors), overrides), {}, {
121
125
  badge: badge,
@@ -136,6 +140,7 @@ var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColo
136
140
  backgroundHover: backgroundHover,
137
141
  iconWrapper: iconWrapper,
138
142
  tooltip: tooltip,
143
+ codeEditor: codeEditor,
139
144
  twoTone: twoTone
140
145
  });
141
146
  export default colors;
@@ -14,6 +14,7 @@ export var astroBlacklistStory = {
14
14
  NavBar: ['Onyx Default'],
15
15
  SearchField: ['Onyx With Filter'],
16
16
  Callout: ['Customizations'],
17
+ CodeView: ['Light'],
17
18
  StatusIcon: ['Default', 'In Rocker Button'],
18
19
  Avatar: ['With Size Variation', 'With Color Variation', 'With Icon Variation', 'With Square Variation'],
19
20
  Text: ['Onyx'],
@@ -121,7 +121,8 @@ export var nextGenColors = {
121
121
  'base': '#23282e',
122
122
  'light': '#5e6d82',
123
123
  'link': '#1a73e8',
124
- 'label': '#5e6d82'
124
+ 'label': '#5e6d82',
125
+ 'reverse': '#ffffff'
125
126
  },
126
127
  'active': '#1a73e8',
127
128
  'active_hover': '#1462C8',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.151.0",
3
+ "version": "2.151.1-alpha.1",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",