@zendeskgarden/react-typography 9.0.0-next.12 → 9.0.0-next.14

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 (15) hide show
  1. package/dist/esm/styled/StyledBlockquote.js +6 -3
  2. package/dist/esm/styled/StyledCode.js +42 -10
  3. package/dist/esm/styled/StyledCodeBlock.js +1 -1
  4. package/dist/esm/styled/StyledCodeBlockContainer.js +1 -1
  5. package/dist/esm/styled/StyledCodeBlockLine.js +1 -1
  6. package/dist/esm/styled/StyledCodeBlockToken.js +1 -1
  7. package/dist/esm/styled/StyledEllipsis.js +1 -1
  8. package/dist/esm/styled/StyledFont.js +30 -21
  9. package/dist/esm/styled/StyledIcon.js +1 -1
  10. package/dist/esm/styled/StyledList.js +2 -2
  11. package/dist/esm/styled/StyledListItem.js +2 -2
  12. package/dist/esm/styled/StyledParagraph.js +1 -1
  13. package/dist/index.cjs.js +86 -42
  14. package/dist/typings/styled/StyledCode.d.ts +3 -2
  15. package/package.json +5 -5
package/dist/esm/styled/StyledBlockquote.js CHANGED
@@ -5,17 +5,20 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled from 'styled-components';
8
- import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
8
+ import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
9
  import { THEME_SIZES } from './StyledFont.js';
10
10
 
11
11
  const COMPONENT_ID = 'typography.blockquote';
12
12
  const StyledBlockquote = styled.blockquote.attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.0.0-next.12'
14
+ 'data-garden-version': '9.0.0-next.14'
15
15
  }).withConfig({
16
16
  displayName: "StyledBlockquote",
17
17
  componentId: "sc-1tt3ye0-0"
18
- })(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";& + &,p + &{margin-top:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.shadowWidths.sm, props => getColorV8('neutralHue', 400, props.theme), props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 4, props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.lineHeights[THEME_SIZES[props.size]], props => retrieveComponentStyles(COMPONENT_ID, props));
18
+ })(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";& + &,p + &{margin-top:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.shadowWidths.sm, props => getColor({
19
+ theme: props.theme,
20
+ variable: 'border.default'
21
+ }), props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 4, props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.lineHeights[THEME_SIZES[props.size]], props => retrieveComponentStyles(COMPONENT_ID, props));
19
22
  StyledBlockquote.defaultProps = {
20
23
  theme: DEFAULT_THEME
21
24
  };
package/dist/esm/styled/StyledCode.js CHANGED
@@ -5,29 +5,61 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled, { css } from 'styled-components';
8
- import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
9
9
  import { StyledFont } from './StyledFont.js';
10
10
 
11
11
  const COMPONENT_ID = 'typography.code';
12
- const colorStyles = props => {
13
- const hue = props.hue || 'neutralHue';
14
- const backgroundColor = getColorV8(hue, 200, props.theme);
15
- const shade = hue === 'yellow' ? 800 : 700;
16
- const foregroundColor = getColorV8(hue, shade, props.theme);
12
+ const colorStyles = _ref => {
13
+ let {
14
+ hue,
15
+ theme
16
+ } = _ref;
17
+ const bgColorArgs = {
18
+ theme,
19
+ light: {
20
+ offset: 100
21
+ },
22
+ dark: {
23
+ offset: -100
24
+ }
25
+ };
26
+ const fgColorArgs = {
27
+ theme
28
+ };
29
+ switch (hue) {
30
+ case 'green':
31
+ bgColorArgs.variable = 'background.success';
32
+ fgColorArgs.variable = 'foreground.successEmphasis';
33
+ break;
34
+ case 'red':
35
+ bgColorArgs.variable = 'background.danger';
36
+ fgColorArgs.variable = 'foreground.dangerEmphasis';
37
+ break;
38
+ case 'yellow':
39
+ bgColorArgs.variable = 'background.warning';
40
+ fgColorArgs.variable = 'foreground.warningEmphasis';
41
+ break;
42
+ default:
43
+ fgColorArgs.variable = 'foreground.default';
44
+ bgColorArgs.variable = 'background.subtle';
45
+ break;
46
+ }
47
+ const backgroundColor = getColor(bgColorArgs);
48
+ const foregroundColor = getColor(fgColorArgs);
17
49
  return css(["background-color:", ";color:", ";a &{color:inherit;}"], backgroundColor, foregroundColor);
18
50
  };
19
51
  const StyledCode = styled(StyledFont).attrs({
20
52
  'data-garden-id': COMPONENT_ID,
21
- 'data-garden-version': '9.0.0-next.12',
22
- as: 'code'
53
+ 'data-garden-version': '9.0.0-next.14',
54
+ as: 'code',
55
+ isMonospace: true
23
56
  }).withConfig({
24
57
  displayName: "StyledCode",
25
58
  componentId: "sc-l8yvmf-0"
26
59
  })(["border-radius:", ";padding:1.5px;", ";", ";"], props => props.theme.borderRadii.sm, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
27
60
  StyledCode.defaultProps = {
28
61
  theme: DEFAULT_THEME,
29
- isMonospace: true,
30
- hue: 'neutralHue',
62
+ hue: 'grey',
31
63
  size: 'inherit'
32
64
  };
33
65
 
package/dist/esm/styled/StyledCodeBlock.js CHANGED
@@ -15,7 +15,7 @@ const colorStyles = props => {
15
15
  };
16
16
  const StyledCodeBlock = styled.pre.attrs({
17
17
  'data-garden-id': COMPONENT_ID,
18
- 'data-garden-version': '9.0.0-next.12'
18
+ 'data-garden-version': '9.0.0-next.14'
19
19
  }).withConfig({
20
20
  displayName: "StyledCodeBlock",
21
21
  componentId: "sc-5wky57-0"
package/dist/esm/styled/StyledCodeBlockContainer.js CHANGED
@@ -10,7 +10,7 @@ import { focusStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgar
10
10
  const COMPONENT_ID = 'typography.codeblock_container';
11
11
  const StyledCodeBlockContainer = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.12'
13
+ 'data-garden-version': '9.0.0-next.14'
14
14
  }).withConfig({
15
15
  displayName: "StyledCodeBlockContainer",
16
16
  componentId: "sc-14zgbfw-0"
package/dist/esm/styled/StyledCodeBlockLine.js CHANGED
@@ -60,7 +60,7 @@ const lineNumberStyles = props => {
60
60
  };
61
61
  const StyledCodeBlockLine = styled(StyledFont).attrs({
62
62
  'data-garden-id': COMPONENT_ID,
63
- 'data-garden-version': '9.0.0-next.12',
63
+ 'data-garden-version': '9.0.0-next.14',
64
64
  as: 'code',
65
65
  isMonospace: true
66
66
  }).withConfig({
package/dist/esm/styled/StyledCodeBlockToken.js CHANGED
@@ -32,7 +32,7 @@ const colorStyles = props => {
32
32
  };
33
33
  const StyledCodeBlockToken = styled.span.attrs({
34
34
  'data-garden-id': COMPONENT_ID,
35
- 'data-garden-version': '9.0.0-next.12'
35
+ 'data-garden-version': '9.0.0-next.14'
36
36
  }).withConfig({
37
37
  displayName: "StyledCodeBlockToken",
38
38
  componentId: "sc-1hkshdq-0"
package/dist/esm/styled/StyledEllipsis.js CHANGED
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
10
10
  const COMPONENT_ID = 'typography.ellipsis';
11
11
  const StyledEllipsis = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.12'
13
+ 'data-garden-version': '9.0.0-next.14'
14
14
  }).withConfig({
15
15
  displayName: "StyledEllipsis",
16
16
  componentId: "sc-1u4uqmy-0"
package/dist/esm/styled/StyledFont.js CHANGED
@@ -6,7 +6,7 @@
6
6
  */
7
7
  import styled, { css } from 'styled-components';
8
8
  import { hideVisually, math } from 'polished';
9
- import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
9
+ import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
10
10
  import { SIZE } from '../types/index.js';
11
11
 
12
12
  const COMPONENT_ID = 'typography.font';
@@ -19,42 +19,51 @@ const THEME_SIZES = {
19
19
  '2xlarge': 'xxl',
20
20
  '3xlarge': 'xxxl'
21
21
  };
22
- const fontStyles = props => {
23
- const monospace = props.isMonospace && ['inherit', 'small', 'medium', 'large'].indexOf(props.size) !== -1;
24
- const fontFamily = monospace && props.theme.fonts.mono;
25
- const direction = props.theme.rtl ? 'rtl' : 'ltr';
22
+ const fontStyles = _ref => {
23
+ let {
24
+ hue,
25
+ isBold,
26
+ isMonospace,
27
+ size,
28
+ theme
29
+ } = _ref;
30
+ const monospace = isMonospace && ['inherit', 'small', 'medium', 'large'].indexOf(size) !== -1;
31
+ const fontFamily = monospace && theme.fonts.mono;
32
+ const direction = theme.rtl ? 'rtl' : 'ltr';
26
33
  let fontSize;
27
34
  let fontWeight;
28
35
  let lineHeight;
29
36
  let color;
30
37
  if (monospace) {
31
- if (props.size === 'inherit') {
38
+ if (size === 'inherit') {
32
39
  fontSize = 'calc(1em - 1px)';
33
40
  lineHeight = 'normal';
34
41
  } else {
35
- const themeSize = THEME_SIZES[props.size];
36
- fontSize = math(`${props.theme.fontSizes[themeSize]} - 1px`);
37
- lineHeight = math(`${props.theme.lineHeights[themeSize]} - 1px`);
42
+ const themeSize = THEME_SIZES[size];
43
+ fontSize = math(`${theme.fontSizes[themeSize]} - 1px`);
44
+ lineHeight = math(`${theme.lineHeights[themeSize]} - 1px`);
38
45
  }
39
- } else if (props.size !== 'inherit') {
40
- const themeSize = THEME_SIZES[props.size];
41
- fontSize = props.theme.fontSizes[themeSize];
42
- lineHeight = props.theme.lineHeights[themeSize];
46
+ } else if (size !== 'inherit') {
47
+ const themeSize = THEME_SIZES[size];
48
+ fontSize = theme.fontSizes[themeSize];
49
+ lineHeight = theme.lineHeights[themeSize];
43
50
  }
44
- if (props.isBold === true) {
45
- fontWeight = props.theme.fontWeights.semibold;
46
- } else if (props.isBold === false || props.size !== 'inherit') {
47
- fontWeight = props.theme.fontWeights.regular;
51
+ if (isBold === true) {
52
+ fontWeight = theme.fontWeights.semibold;
53
+ } else if (isBold === false || size !== 'inherit') {
54
+ fontWeight = theme.fontWeights.regular;
48
55
  }
49
- if (props.hue) {
50
- const shade = props.hue === 'yellow' ? 700 : 600;
51
- color = getColorV8(props.hue, shade, props.theme);
56
+ if (hue) {
57
+ color = getColor({
58
+ hue,
59
+ theme
60
+ });
52
61
  }
53
62
  return css(["line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
54
63
  };
55
64
  const StyledFont = styled.div.attrs({
56
65
  'data-garden-id': COMPONENT_ID,
57
- 'data-garden-version': '9.0.0-next.12'
66
+ 'data-garden-version': '9.0.0-next.14'
58
67
  }).withConfig({
59
68
  displayName: "StyledFont",
60
69
  componentId: "sc-1iildbo-0"
package/dist/esm/styled/StyledIcon.js CHANGED
@@ -15,7 +15,7 @@ const sizeStyles = props => {
15
15
  };
16
16
  const StyledIcon = styled(StyledBaseIcon).attrs({
17
17
  'data-garden-id': COMPONENT_ID,
18
- 'data-garden-version': '9.0.0-next.12'
18
+ 'data-garden-version': '9.0.0-next.14'
19
19
  }).withConfig({
20
20
  displayName: "StyledIcon",
21
21
  componentId: "sc-10rfb5b-0"
package/dist/esm/styled/StyledList.js CHANGED
@@ -14,7 +14,7 @@ const listStyles = props => {
14
14
  const ORDERED_ID = 'typography.ordered_list';
15
15
  const StyledOrderedList = styled.ol.attrs({
16
16
  'data-garden-id': ORDERED_ID,
17
- 'data-garden-version': '9.0.0-next.12'
17
+ 'data-garden-version': '9.0.0-next.14'
18
18
  }).withConfig({
19
19
  displayName: "StyledList__StyledOrderedList",
20
20
  componentId: "sc-jdbsfi-0"
@@ -25,7 +25,7 @@ StyledOrderedList.defaultProps = {
25
25
  const UNORDERED_ID = 'typography.unordered_list';
26
26
  const StyledUnorderedList = styled.ul.attrs({
27
27
  'data-garden-id': UNORDERED_ID,
28
- 'data-garden-version': '9.0.0-next.12'
28
+ 'data-garden-version': '9.0.0-next.14'
29
29
  }).withConfig({
30
30
  displayName: "StyledList__StyledUnorderedList",
31
31
  componentId: "sc-jdbsfi-1"
package/dist/esm/styled/StyledListItem.js CHANGED
@@ -21,7 +21,7 @@ const listItemStyles = props => {
21
21
  const ORDERED_ID = 'typography.ordered_list_item';
22
22
  const StyledOrderedListItem = styled(StyledFont).attrs({
23
23
  'data-garden-id': ORDERED_ID,
24
- 'data-garden-version': '9.0.0-next.12',
24
+ 'data-garden-version': '9.0.0-next.14',
25
25
  as: 'li'
26
26
  }).withConfig({
27
27
  displayName: "StyledListItem__StyledOrderedListItem",
@@ -34,7 +34,7 @@ StyledOrderedListItem.defaultProps = {
34
34
  const UNORDERED_ID = 'typography.unordered_list_item';
35
35
  const StyledUnorderedListItem = styled(StyledFont).attrs({
36
36
  'data-garden-id': UNORDERED_ID,
37
- 'data-garden-version': '9.0.0-next.12',
37
+ 'data-garden-version': '9.0.0-next.14',
38
38
  as: 'li'
39
39
  }).withConfig({
40
40
  displayName: "StyledListItem__StyledUnorderedListItem",
package/dist/esm/styled/StyledParagraph.js CHANGED
@@ -11,7 +11,7 @@ import { THEME_SIZES } from './StyledFont.js';
11
11
  const COMPONENT_ID = 'typography.paragraph';
12
12
  const StyledParagraph = styled.p.attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.0.0-next.12'
14
+ 'data-garden-version': '9.0.0-next.14'
15
15
  }).withConfig({
16
16
  displayName: "StyledParagraph",
17
17
  componentId: "sc-zkuftz-0"
package/dist/index.cjs.js CHANGED
@@ -38,42 +38,51 @@ const THEME_SIZES = {
38
38
  '2xlarge': 'xxl',
39
39
  '3xlarge': 'xxxl'
40
40
  };
41
- const fontStyles = props => {
42
- const monospace = props.isMonospace && ['inherit', 'small', 'medium', 'large'].indexOf(props.size) !== -1;
43
- const fontFamily = monospace && props.theme.fonts.mono;
44
- const direction = props.theme.rtl ? 'rtl' : 'ltr';
41
+ const fontStyles = _ref => {
42
+ let {
43
+ hue,
44
+ isBold,
45
+ isMonospace,
46
+ size,
47
+ theme
48
+ } = _ref;
49
+ const monospace = isMonospace && ['inherit', 'small', 'medium', 'large'].indexOf(size) !== -1;
50
+ const fontFamily = monospace && theme.fonts.mono;
51
+ const direction = theme.rtl ? 'rtl' : 'ltr';
45
52
  let fontSize;
46
53
  let fontWeight;
47
54
  let lineHeight;
48
55
  let color;
49
56
  if (monospace) {
50
- if (props.size === 'inherit') {
57
+ if (size === 'inherit') {
51
58
  fontSize = 'calc(1em - 1px)';
52
59
  lineHeight = 'normal';
53
60
  } else {
54
- const themeSize = THEME_SIZES[props.size];
55
- fontSize = polished.math(`${props.theme.fontSizes[themeSize]} - 1px`);
56
- lineHeight = polished.math(`${props.theme.lineHeights[themeSize]} - 1px`);
61
+ const themeSize = THEME_SIZES[size];
62
+ fontSize = polished.math(`${theme.fontSizes[themeSize]} - 1px`);
63
+ lineHeight = polished.math(`${theme.lineHeights[themeSize]} - 1px`);
57
64
  }
58
- } else if (props.size !== 'inherit') {
59
- const themeSize = THEME_SIZES[props.size];
60
- fontSize = props.theme.fontSizes[themeSize];
61
- lineHeight = props.theme.lineHeights[themeSize];
65
+ } else if (size !== 'inherit') {
66
+ const themeSize = THEME_SIZES[size];
67
+ fontSize = theme.fontSizes[themeSize];
68
+ lineHeight = theme.lineHeights[themeSize];
62
69
  }
63
- if (props.isBold === true) {
64
- fontWeight = props.theme.fontWeights.semibold;
65
- } else if (props.isBold === false || props.size !== 'inherit') {
66
- fontWeight = props.theme.fontWeights.regular;
70
+ if (isBold === true) {
71
+ fontWeight = theme.fontWeights.semibold;
72
+ } else if (isBold === false || size !== 'inherit') {
73
+ fontWeight = theme.fontWeights.regular;
67
74
  }
68
- if (props.hue) {
69
- const shade = props.hue === 'yellow' ? 700 : 600;
70
- color = reactTheming.getColorV8(props.hue, shade, props.theme);
75
+ if (hue) {
76
+ color = reactTheming.getColor({
77
+ hue,
78
+ theme
79
+ });
71
80
  }
72
81
  return styled.css(["line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
73
82
  };
74
83
  const StyledFont = styled__default.default.div.attrs({
75
84
  'data-garden-id': COMPONENT_ID$9,
76
- 'data-garden-version': '9.0.0-next.12'
85
+ 'data-garden-version': '9.0.0-next.14'
77
86
  }).withConfig({
78
87
  displayName: "StyledFont",
79
88
  componentId: "sc-1iildbo-0"
@@ -86,35 +95,70 @@ StyledFont.defaultProps = {
86
95
  const COMPONENT_ID$8 = 'typography.blockquote';
87
96
  const StyledBlockquote = styled__default.default.blockquote.attrs({
88
97
  'data-garden-id': COMPONENT_ID$8,
89
- 'data-garden-version': '9.0.0-next.12'
98
+ 'data-garden-version': '9.0.0-next.14'
90
99
  }).withConfig({
91
100
  displayName: "StyledBlockquote",
92
101
  componentId: "sc-1tt3ye0-0"
93
- })(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";& + &,p + &{margin-top:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.shadowWidths.sm, props => reactTheming.getColorV8('neutralHue', 400, props.theme), props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 4, props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.lineHeights[THEME_SIZES[props.size]], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
102
+ })(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";& + &,p + &{margin-top:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.shadowWidths.sm, props => reactTheming.getColor({
103
+ theme: props.theme,
104
+ variable: 'border.default'
105
+ }), props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 4, props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.lineHeights[THEME_SIZES[props.size]], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
94
106
  StyledBlockquote.defaultProps = {
95
107
  theme: reactTheming.DEFAULT_THEME
96
108
  };
97
109
 
98
110
  const COMPONENT_ID$7 = 'typography.code';
99
- const colorStyles$3 = props => {
100
- const hue = props.hue || 'neutralHue';
101
- const backgroundColor = reactTheming.getColorV8(hue, 200, props.theme);
102
- const shade = hue === 'yellow' ? 800 : 700;
103
- const foregroundColor = reactTheming.getColorV8(hue, shade, props.theme);
111
+ const colorStyles$3 = _ref => {
112
+ let {
113
+ hue,
114
+ theme
115
+ } = _ref;
116
+ const bgColorArgs = {
117
+ theme,
118
+ light: {
119
+ offset: 100
120
+ },
121
+ dark: {
122
+ offset: -100
123
+ }
124
+ };
125
+ const fgColorArgs = {
126
+ theme
127
+ };
128
+ switch (hue) {
129
+ case 'green':
130
+ bgColorArgs.variable = 'background.success';
131
+ fgColorArgs.variable = 'foreground.successEmphasis';
132
+ break;
133
+ case 'red':
134
+ bgColorArgs.variable = 'background.danger';
135
+ fgColorArgs.variable = 'foreground.dangerEmphasis';
136
+ break;
137
+ case 'yellow':
138
+ bgColorArgs.variable = 'background.warning';
139
+ fgColorArgs.variable = 'foreground.warningEmphasis';
140
+ break;
141
+ default:
142
+ fgColorArgs.variable = 'foreground.default';
143
+ bgColorArgs.variable = 'background.subtle';
144
+ break;
145
+ }
146
+ const backgroundColor = reactTheming.getColor(bgColorArgs);
147
+ const foregroundColor = reactTheming.getColor(fgColorArgs);
104
148
  return styled.css(["background-color:", ";color:", ";a &{color:inherit;}"], backgroundColor, foregroundColor);
105
149
  };
106
150
  const StyledCode = styled__default.default(StyledFont).attrs({
107
151
  'data-garden-id': COMPONENT_ID$7,
108
- 'data-garden-version': '9.0.0-next.12',
109
- as: 'code'
152
+ 'data-garden-version': '9.0.0-next.14',
153
+ as: 'code',
154
+ isMonospace: true
110
155
  }).withConfig({
111
156
  displayName: "StyledCode",
112
157
  componentId: "sc-l8yvmf-0"
113
158
  })(["border-radius:", ";padding:1.5px;", ";", ";"], props => props.theme.borderRadii.sm, props => colorStyles$3(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
114
159
  StyledCode.defaultProps = {
115
160
  theme: reactTheming.DEFAULT_THEME,
116
- isMonospace: true,
117
- hue: 'neutralHue',
161
+ hue: 'grey',
118
162
  size: 'inherit'
119
163
  };
120
164
 
@@ -126,7 +170,7 @@ const colorStyles$2 = props => {
126
170
  };
127
171
  const StyledCodeBlock = styled__default.default.pre.attrs({
128
172
  'data-garden-id': COMPONENT_ID$6,
129
- 'data-garden-version': '9.0.0-next.12'
173
+ 'data-garden-version': '9.0.0-next.14'
130
174
  }).withConfig({
131
175
  displayName: "StyledCodeBlock",
132
176
  componentId: "sc-5wky57-0"
@@ -138,7 +182,7 @@ StyledCodeBlock.defaultProps = {
138
182
  const COMPONENT_ID$5 = 'typography.codeblock_container';
139
183
  const StyledCodeBlockContainer = styled__default.default.div.attrs({
140
184
  'data-garden-id': COMPONENT_ID$5,
141
- 'data-garden-version': '9.0.0-next.12'
185
+ 'data-garden-version': '9.0.0-next.14'
142
186
  }).withConfig({
143
187
  displayName: "StyledCodeBlockContainer",
144
188
  componentId: "sc-14zgbfw-0"
@@ -201,7 +245,7 @@ const lineNumberStyles = props => {
201
245
  };
202
246
  const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
203
247
  'data-garden-id': COMPONENT_ID$4,
204
- 'data-garden-version': '9.0.0-next.12',
248
+ 'data-garden-version': '9.0.0-next.14',
205
249
  as: 'code',
206
250
  isMonospace: true
207
251
  }).withConfig({
@@ -236,7 +280,7 @@ const colorStyles = props => {
236
280
  };
237
281
  const StyledCodeBlockToken = styled__default.default.span.attrs({
238
282
  'data-garden-id': COMPONENT_ID$3,
239
- 'data-garden-version': '9.0.0-next.12'
283
+ 'data-garden-version': '9.0.0-next.14'
240
284
  }).withConfig({
241
285
  displayName: "StyledCodeBlockToken",
242
286
  componentId: "sc-1hkshdq-0"
@@ -248,7 +292,7 @@ StyledCodeBlockToken.defaultProps = {
248
292
  const COMPONENT_ID$2 = 'typography.ellipsis';
249
293
  const StyledEllipsis = styled__default.default.div.attrs({
250
294
  'data-garden-id': COMPONENT_ID$2,
251
- 'data-garden-version': '9.0.0-next.12'
295
+ 'data-garden-version': '9.0.0-next.14'
252
296
  }).withConfig({
253
297
  displayName: "StyledEllipsis",
254
298
  componentId: "sc-1u4uqmy-0"
@@ -265,7 +309,7 @@ const sizeStyles = props => {
265
309
  };
266
310
  const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
267
311
  'data-garden-id': COMPONENT_ID$1,
268
- 'data-garden-version': '9.0.0-next.12'
312
+ 'data-garden-version': '9.0.0-next.14'
269
313
  }).withConfig({
270
314
  displayName: "StyledIcon",
271
315
  componentId: "sc-10rfb5b-0"
@@ -281,7 +325,7 @@ const listStyles = props => {
281
325
  const ORDERED_ID$1 = 'typography.ordered_list';
282
326
  const StyledOrderedList = styled__default.default.ol.attrs({
283
327
  'data-garden-id': ORDERED_ID$1,
284
- 'data-garden-version': '9.0.0-next.12'
328
+ 'data-garden-version': '9.0.0-next.14'
285
329
  }).withConfig({
286
330
  displayName: "StyledList__StyledOrderedList",
287
331
  componentId: "sc-jdbsfi-0"
@@ -292,7 +336,7 @@ StyledOrderedList.defaultProps = {
292
336
  const UNORDERED_ID$1 = 'typography.unordered_list';
293
337
  const StyledUnorderedList = styled__default.default.ul.attrs({
294
338
  'data-garden-id': UNORDERED_ID$1,
295
- 'data-garden-version': '9.0.0-next.12'
339
+ 'data-garden-version': '9.0.0-next.14'
296
340
  }).withConfig({
297
341
  displayName: "StyledList__StyledUnorderedList",
298
342
  componentId: "sc-jdbsfi-1"
@@ -312,7 +356,7 @@ const listItemStyles = props => {
312
356
  const ORDERED_ID = 'typography.ordered_list_item';
313
357
  const StyledOrderedListItem = styled__default.default(StyledFont).attrs({
314
358
  'data-garden-id': ORDERED_ID,
315
- 'data-garden-version': '9.0.0-next.12',
359
+ 'data-garden-version': '9.0.0-next.14',
316
360
  as: 'li'
317
361
  }).withConfig({
318
362
  displayName: "StyledListItem__StyledOrderedListItem",
@@ -325,7 +369,7 @@ StyledOrderedListItem.defaultProps = {
325
369
  const UNORDERED_ID = 'typography.unordered_list_item';
326
370
  const StyledUnorderedListItem = styled__default.default(StyledFont).attrs({
327
371
  'data-garden-id': UNORDERED_ID,
328
- 'data-garden-version': '9.0.0-next.12',
372
+ 'data-garden-version': '9.0.0-next.14',
329
373
  as: 'li'
330
374
  }).withConfig({
331
375
  displayName: "StyledListItem__StyledUnorderedListItem",
@@ -339,7 +383,7 @@ StyledUnorderedListItem.defaultProps = {
339
383
  const COMPONENT_ID = 'typography.paragraph';
340
384
  const StyledParagraph = styled__default.default.p.attrs({
341
385
  'data-garden-id': COMPONENT_ID,
342
- 'data-garden-version': '9.0.0-next.12'
386
+ 'data-garden-version': '9.0.0-next.14'
343
387
  }).withConfig({
344
388
  displayName: "StyledParagraph",
345
389
  componentId: "sc-zkuftz-0"
package/dist/typings/styled/StyledCode.d.ts CHANGED
@@ -8,12 +8,13 @@ import { DefaultTheme } from 'styled-components';
8
8
  import { IStyledFontProps } from './StyledFont';
9
9
  import { ICodeProps } from '../types';
10
10
  interface IStyledCodeProps extends Omit<IStyledFontProps, 'size'> {
11
- hue?: string;
11
+ hue?: ICodeProps['hue'];
12
12
  size?: ICodeProps['size'];
13
13
  }
14
14
  export declare const StyledCode: import("styled-components").StyledComponent<"code", DefaultTheme, {
15
15
  'data-garden-id': string;
16
16
  'data-garden-version': string;
17
17
  as: string;
18
- } & IStyledCodeProps, "as" | "data-garden-id" | "data-garden-version">;
18
+ isMonospace: boolean;
19
+ } & IStyledCodeProps, "isMonospace" | "as" | "data-garden-id" | "data-garden-version">;
19
20
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-typography",
3
- "version": "9.0.0-next.12",
3
+ "version": "9.0.0-next.14",
4
4
  "description": "Components relating to typography in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,8 +21,8 @@
21
21
  "sideEffects": false,
22
22
  "types": "dist/typings/index.d.ts",
23
23
  "dependencies": {
24
- "@zendeskgarden/container-scrollregion": "^1.0.0",
25
- "polished": "^4.0.0",
24
+ "@zendeskgarden/container-scrollregion": "^1.0.9",
25
+ "polished": "^4.3.1",
26
26
  "prism-react-renderer": "^1.1.1",
27
27
  "prop-types": "^15.5.7"
28
28
  },
@@ -33,7 +33,7 @@
33
33
  "styled-components": "^5.3.1"
34
34
  },
35
35
  "devDependencies": {
36
- "@zendeskgarden/react-theming": "^9.0.0-next.12"
36
+ "@zendeskgarden/react-theming": "^9.0.0-next.14"
37
37
  },
38
38
  "keywords": [
39
39
  "components",
@@ -45,5 +45,5 @@
45
45
  "access": "public"
46
46
  },
47
47
  "zendeskgarden:src": "src/index.ts",
48
- "gitHead": "7925ff78236795111e2953efbce549839df3a86d"
48
+ "gitHead": "4cd4e10839f6d083f0c5e642b99256e390a37ae6"
49
49
  }