@zendeskgarden/react-typography 9.0.0-next.21 → 9.0.0-next.22

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 +1 -1
  2. package/dist/esm/styled/StyledCode.js +1 -1
  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 +8 -4
  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 +21 -17
  14. package/dist/typings/types/index.d.ts +4 -2
  15. package/package.json +3 -3
package/dist/esm/styled/StyledBlockquote.js CHANGED
@@ -11,7 +11,7 @@ import { THEME_SIZES } from './StyledFont.js';
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.21'
14
+ 'data-garden-version': '9.0.0-next.22'
15
15
  }).withConfig({
16
16
  displayName: "StyledBlockquote",
17
17
  componentId: "sc-1tt3ye0-0"
package/dist/esm/styled/StyledCode.js CHANGED
@@ -50,7 +50,7 @@ const colorStyles = _ref => {
50
50
  };
51
51
  const StyledCode = styled(StyledFont).attrs({
52
52
  'data-garden-id': COMPONENT_ID,
53
- 'data-garden-version': '9.0.0-next.21',
53
+ 'data-garden-version': '9.0.0-next.22',
54
54
  as: 'code',
55
55
  isMonospace: true
56
56
  }).withConfig({
package/dist/esm/styled/StyledCodeBlock.js CHANGED
@@ -24,7 +24,7 @@ const colorStyles = _ref => {
24
24
  };
25
25
  const StyledCodeBlock = styled.pre.attrs({
26
26
  'data-garden-id': COMPONENT_ID,
27
- 'data-garden-version': '9.0.0-next.21'
27
+ 'data-garden-version': '9.0.0-next.22'
28
28
  }).withConfig({
29
29
  displayName: "StyledCodeBlock",
30
30
  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.21'
13
+ 'data-garden-version': '9.0.0-next.22'
14
14
  }).withConfig({
15
15
  displayName: "StyledCodeBlockContainer",
16
16
  componentId: "sc-14zgbfw-0"
package/dist/esm/styled/StyledCodeBlockLine.js CHANGED
@@ -86,7 +86,7 @@ const lineNumberStyles = _ref2 => {
86
86
  };
87
87
  const StyledCodeBlockLine = styled(StyledFont).attrs({
88
88
  'data-garden-id': COMPONENT_ID,
89
- 'data-garden-version': '9.0.0-next.21',
89
+ 'data-garden-version': '9.0.0-next.22',
90
90
  as: 'code',
91
91
  isMonospace: true
92
92
  }).withConfig({
package/dist/esm/styled/StyledCodeBlockToken.js CHANGED
@@ -171,7 +171,7 @@ const colorStyles = _ref => {
171
171
  };
172
172
  const StyledCodeBlockToken = styled.span.attrs({
173
173
  'data-garden-id': COMPONENT_ID,
174
- 'data-garden-version': '9.0.0-next.21'
174
+ 'data-garden-version': '9.0.0-next.22'
175
175
  }).withConfig({
176
176
  displayName: "StyledCodeBlockToken",
177
177
  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.21'
13
+ 'data-garden-version': '9.0.0-next.22'
14
14
  }).withConfig({
15
15
  displayName: "StyledEllipsis",
16
16
  componentId: "sc-1u4uqmy-0"
package/dist/esm/styled/StyledFont.js CHANGED
@@ -54,16 +54,20 @@ const fontStyles = _ref => {
54
54
  fontWeight = theme.fontWeights.regular;
55
55
  }
56
56
  if (hue) {
57
- color = getColor({
57
+ const options = hue.includes('.') ? {
58
+ variable: hue,
59
+ theme
60
+ } : {
58
61
  hue,
59
62
  theme
60
- });
63
+ };
64
+ color = getColor(options);
61
65
  }
62
- return css(["line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
66
+ return css(["transition:color 0.1s ease-in-out;line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
63
67
  };
64
68
  const StyledFont = styled.div.attrs({
65
69
  'data-garden-id': COMPONENT_ID,
66
- 'data-garden-version': '9.0.0-next.21'
70
+ 'data-garden-version': '9.0.0-next.22'
67
71
  }).withConfig({
68
72
  displayName: "StyledFont",
69
73
  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.21'
18
+ 'data-garden-version': '9.0.0-next.22'
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.21'
17
+ 'data-garden-version': '9.0.0-next.22'
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.21'
28
+ 'data-garden-version': '9.0.0-next.22'
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.21',
24
+ 'data-garden-version': '9.0.0-next.22',
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.21',
37
+ 'data-garden-version': '9.0.0-next.22',
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.21'
14
+ 'data-garden-version': '9.0.0-next.22'
15
15
  }).withConfig({
16
16
  displayName: "StyledParagraph",
17
17
  componentId: "sc-zkuftz-0"
package/dist/index.cjs.js CHANGED
@@ -72,16 +72,20 @@ const fontStyles = _ref => {
72
72
  fontWeight = theme.fontWeights.regular;
73
73
  }
74
74
  if (hue) {
75
- color = reactTheming.getColor({
75
+ const options = hue.includes('.') ? {
76
+ variable: hue,
77
+ theme
78
+ } : {
76
79
  hue,
77
80
  theme
78
- });
81
+ };
82
+ color = reactTheming.getColor(options);
79
83
  }
80
- return styled.css(["line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
84
+ return styled.css(["transition:color 0.1s ease-in-out;line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
81
85
  };
82
86
  const StyledFont = styled__default.default.div.attrs({
83
87
  'data-garden-id': COMPONENT_ID$9,
84
- 'data-garden-version': '9.0.0-next.21'
88
+ 'data-garden-version': '9.0.0-next.22'
85
89
  }).withConfig({
86
90
  displayName: "StyledFont",
87
91
  componentId: "sc-1iildbo-0"
@@ -94,7 +98,7 @@ StyledFont.defaultProps = {
94
98
  const COMPONENT_ID$8 = 'typography.blockquote';
95
99
  const StyledBlockquote = styled__default.default.blockquote.attrs({
96
100
  'data-garden-id': COMPONENT_ID$8,
97
- 'data-garden-version': '9.0.0-next.21'
101
+ 'data-garden-version': '9.0.0-next.22'
98
102
  }).withConfig({
99
103
  displayName: "StyledBlockquote",
100
104
  componentId: "sc-1tt3ye0-0"
@@ -148,7 +152,7 @@ const colorStyles$3 = _ref => {
148
152
  };
149
153
  const StyledCode = styled__default.default(StyledFont).attrs({
150
154
  'data-garden-id': COMPONENT_ID$7,
151
- 'data-garden-version': '9.0.0-next.21',
155
+ 'data-garden-version': '9.0.0-next.22',
152
156
  as: 'code',
153
157
  isMonospace: true
154
158
  }).withConfig({
@@ -178,7 +182,7 @@ const colorStyles$2 = _ref => {
178
182
  };
179
183
  const StyledCodeBlock = styled__default.default.pre.attrs({
180
184
  'data-garden-id': COMPONENT_ID$6,
181
- 'data-garden-version': '9.0.0-next.21'
185
+ 'data-garden-version': '9.0.0-next.22'
182
186
  }).withConfig({
183
187
  displayName: "StyledCodeBlock",
184
188
  componentId: "sc-5wky57-0"
@@ -190,7 +194,7 @@ StyledCodeBlock.defaultProps = {
190
194
  const COMPONENT_ID$5 = 'typography.codeblock_container';
191
195
  const StyledCodeBlockContainer = styled__default.default.div.attrs({
192
196
  'data-garden-id': COMPONENT_ID$5,
193
- 'data-garden-version': '9.0.0-next.21'
197
+ 'data-garden-version': '9.0.0-next.22'
194
198
  }).withConfig({
195
199
  displayName: "StyledCodeBlockContainer",
196
200
  componentId: "sc-14zgbfw-0"
@@ -279,7 +283,7 @@ const lineNumberStyles = _ref2 => {
279
283
  };
280
284
  const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
281
285
  'data-garden-id': COMPONENT_ID$4,
282
- 'data-garden-version': '9.0.0-next.21',
286
+ 'data-garden-version': '9.0.0-next.22',
283
287
  as: 'code',
284
288
  isMonospace: true
285
289
  }).withConfig({
@@ -453,7 +457,7 @@ const colorStyles = _ref => {
453
457
  };
454
458
  const StyledCodeBlockToken = styled__default.default.span.attrs({
455
459
  'data-garden-id': COMPONENT_ID$3,
456
- 'data-garden-version': '9.0.0-next.21'
460
+ 'data-garden-version': '9.0.0-next.22'
457
461
  }).withConfig({
458
462
  displayName: "StyledCodeBlockToken",
459
463
  componentId: "sc-1hkshdq-0"
@@ -465,7 +469,7 @@ StyledCodeBlockToken.defaultProps = {
465
469
  const COMPONENT_ID$2 = 'typography.ellipsis';
466
470
  const StyledEllipsis = styled__default.default.div.attrs({
467
471
  'data-garden-id': COMPONENT_ID$2,
468
- 'data-garden-version': '9.0.0-next.21'
472
+ 'data-garden-version': '9.0.0-next.22'
469
473
  }).withConfig({
470
474
  displayName: "StyledEllipsis",
471
475
  componentId: "sc-1u4uqmy-0"
@@ -482,7 +486,7 @@ const sizeStyles = props => {
482
486
  };
483
487
  const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
484
488
  'data-garden-id': COMPONENT_ID$1,
485
- 'data-garden-version': '9.0.0-next.21'
489
+ 'data-garden-version': '9.0.0-next.22'
486
490
  }).withConfig({
487
491
  displayName: "StyledIcon",
488
492
  componentId: "sc-10rfb5b-0"
@@ -498,7 +502,7 @@ const listStyles = props => {
498
502
  const ORDERED_ID$1 = 'typography.ordered_list';
499
503
  const StyledOrderedList = styled__default.default.ol.attrs({
500
504
  'data-garden-id': ORDERED_ID$1,
501
- 'data-garden-version': '9.0.0-next.21'
505
+ 'data-garden-version': '9.0.0-next.22'
502
506
  }).withConfig({
503
507
  displayName: "StyledList__StyledOrderedList",
504
508
  componentId: "sc-jdbsfi-0"
@@ -509,7 +513,7 @@ StyledOrderedList.defaultProps = {
509
513
  const UNORDERED_ID$1 = 'typography.unordered_list';
510
514
  const StyledUnorderedList = styled__default.default.ul.attrs({
511
515
  'data-garden-id': UNORDERED_ID$1,
512
- 'data-garden-version': '9.0.0-next.21'
516
+ 'data-garden-version': '9.0.0-next.22'
513
517
  }).withConfig({
514
518
  displayName: "StyledList__StyledUnorderedList",
515
519
  componentId: "sc-jdbsfi-1"
@@ -529,7 +533,7 @@ const listItemStyles = props => {
529
533
  const ORDERED_ID = 'typography.ordered_list_item';
530
534
  const StyledOrderedListItem = styled__default.default(StyledFont).attrs({
531
535
  'data-garden-id': ORDERED_ID,
532
- 'data-garden-version': '9.0.0-next.21',
536
+ 'data-garden-version': '9.0.0-next.22',
533
537
  as: 'li'
534
538
  }).withConfig({
535
539
  displayName: "StyledListItem__StyledOrderedListItem",
@@ -542,7 +546,7 @@ StyledOrderedListItem.defaultProps = {
542
546
  const UNORDERED_ID = 'typography.unordered_list_item';
543
547
  const StyledUnorderedListItem = styled__default.default(StyledFont).attrs({
544
548
  'data-garden-id': UNORDERED_ID,
545
- 'data-garden-version': '9.0.0-next.21',
549
+ 'data-garden-version': '9.0.0-next.22',
546
550
  as: 'li'
547
551
  }).withConfig({
548
552
  displayName: "StyledListItem__StyledUnorderedListItem",
@@ -556,7 +560,7 @@ StyledUnorderedListItem.defaultProps = {
556
560
  const COMPONENT_ID = 'typography.paragraph';
557
561
  const StyledParagraph = styled__default.default.p.attrs({
558
562
  'data-garden-id': COMPONENT_ID,
559
- 'data-garden-version': '9.0.0-next.21'
563
+ 'data-garden-version': '9.0.0-next.22'
560
564
  }).withConfig({
561
565
  displayName: "StyledParagraph",
562
566
  componentId: "sc-zkuftz-0"
package/dist/typings/types/index.d.ts CHANGED
@@ -77,8 +77,10 @@ export interface ISpanProps extends HTMLAttributes<HTMLSpanElement> {
77
77
  /** Renders with monospace font */
78
78
  isMonospace?: boolean;
79
79
  /**
80
- * Applies a font color. Use [PALETTE](/components/palette#palette) colors
81
- * when possible. Accepts all hex values.
80
+ * Applies a font color. Use a [color
81
+ * variable](/components/theme-object#colors) key (i.e. `foreground.subtle`)
82
+ * or [PALETTE](/components/palette#palette) colors when possible. Accepts all
83
+ * hex values.
82
84
  */
83
85
  hue?: string;
84
86
  /** Hides the span visually without hiding it from screen readers */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-typography",
3
- "version": "9.0.0-next.21",
3
+ "version": "9.0.0-next.22",
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>",
@@ -34,7 +34,7 @@
34
34
  "styled-components": "^5.3.1"
35
35
  },
36
36
  "devDependencies": {
37
- "@zendeskgarden/react-theming": "^9.0.0-next.21"
37
+ "@zendeskgarden/react-theming": "^9.0.0-next.22"
38
38
  },
39
39
  "keywords": [
40
40
  "components",
@@ -46,5 +46,5 @@
46
46
  "access": "public"
47
47
  },
48
48
  "zendeskgarden:src": "src/index.ts",
49
- "gitHead": "a245ce2b794ea65142174a6a1f855a111b2677a2"
49
+ "gitHead": "46309385a1495c2297da23409f4196f662fe418b"
50
50
  }