@zendeskgarden/react-typography 9.12.6 → 9.14.0

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 +6 -13
  9. package/dist/esm/styled/StyledIcon.js +1 -1
  10. package/dist/esm/styled/StyledKbd.js +1 -1
  11. package/dist/esm/styled/StyledList.js +2 -2
  12. package/dist/esm/styled/StyledListItem.js +2 -2
  13. package/dist/esm/styled/StyledParagraph.js +1 -1
  14. package/dist/index.cjs.js +19 -26
  15. package/package.json +4 -4
package/dist/esm/styled/StyledBlockquote.js CHANGED
@@ -11,7 +11,7 @@ import { THEME_SIZES } from './StyledFont.js';
11
11
  const COMPONENT_ID$9 = 'typography.blockquote';
12
12
  const StyledBlockquote = styled.blockquote.attrs({
13
13
  'data-garden-id': COMPONENT_ID$9,
14
- 'data-garden-version': '9.12.6'
14
+ 'data-garden-version': '9.14.0'
15
15
  }).withConfig({
16
16
  displayName: "StyledBlockquote",
17
17
  componentId: "sc-1tt3ye0-0"
package/dist/esm/styled/StyledCode.js CHANGED
@@ -49,7 +49,7 @@ const colorStyles$3 = ({
49
49
  };
50
50
  const StyledCode = styled(StyledFont).attrs(props => ({
51
51
  'data-garden-id': COMPONENT_ID$8,
52
- 'data-garden-version': '9.12.6',
52
+ 'data-garden-version': '9.14.0',
53
53
  as: 'code',
54
54
  $isMonospace: true,
55
55
  $hue: props.$hue ?? 'grey',
package/dist/esm/styled/StyledCodeBlock.js CHANGED
@@ -23,7 +23,7 @@ const colorStyles$2 = ({
23
23
  };
24
24
  const StyledCodeBlock = styled.pre.attrs({
25
25
  'data-garden-id': COMPONENT_ID$7,
26
- 'data-garden-version': '9.12.6'
26
+ 'data-garden-version': '9.14.0'
27
27
  }).withConfig({
28
28
  displayName: "StyledCodeBlock",
29
29
  componentId: "sc-5wky57-0"
package/dist/esm/styled/StyledCodeBlockContainer.js CHANGED
@@ -10,7 +10,7 @@ import { focusStyles, componentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID$6 = 'typography.codeblock_container';
11
11
  const StyledCodeBlockContainer = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID$6,
13
- 'data-garden-version': '9.12.6'
13
+ 'data-garden-version': '9.14.0'
14
14
  }).withConfig({
15
15
  displayName: "StyledCodeBlockContainer",
16
16
  componentId: "sc-14zgbfw-0"
package/dist/esm/styled/StyledCodeBlockLine.js CHANGED
@@ -84,7 +84,7 @@ const lineNumberStyles = ({
84
84
  };
85
85
  const StyledCodeBlockLine = styled(StyledFont).attrs({
86
86
  'data-garden-id': COMPONENT_ID$5,
87
- 'data-garden-version': '9.12.6',
87
+ 'data-garden-version': '9.14.0',
88
88
  as: 'code',
89
89
  $isMonospace: true
90
90
  }).withConfig({
package/dist/esm/styled/StyledCodeBlockToken.js CHANGED
@@ -170,7 +170,7 @@ const colorStyles = ({
170
170
  };
171
171
  const StyledCodeBlockToken = styled.span.attrs({
172
172
  'data-garden-id': COMPONENT_ID$4,
173
- 'data-garden-version': '9.12.6'
173
+ 'data-garden-version': '9.14.0'
174
174
  }).withConfig({
175
175
  displayName: "StyledCodeBlockToken",
176
176
  componentId: "sc-1hkshdq-0"
package/dist/esm/styled/StyledEllipsis.js CHANGED
@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID$3 = 'typography.ellipsis';
11
11
  const StyledEllipsis = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID$3,
13
- 'data-garden-version': '9.12.6'
13
+ 'data-garden-version': '9.14.0'
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 { componentStyles, getColor } from '@zendeskgarden/react-theming';
9
+ import { componentStyles, getHueColor } from '@zendeskgarden/react-theming';
10
10
  import { SIZE } from '../types/index.js';
11
11
 
12
12
  const COMPONENT_ID$a = 'typography.font';
@@ -29,10 +29,13 @@ const fontStyles = ({
29
29
  const monospace = $isMonospace && ['inherit', 'small', 'medium', 'large'].indexOf($size) !== -1;
30
30
  const fontFamily = monospace && theme.fonts.mono;
31
31
  const direction = theme.rtl ? 'rtl' : 'ltr';
32
+ const color = $hue ? getHueColor({
33
+ theme,
34
+ value: $hue
35
+ }) : undefined;
32
36
  let fontSize;
33
37
  let fontWeight;
34
38
  let lineHeight;
35
- let color;
36
39
  if (monospace) {
37
40
  if ($size === 'inherit') {
38
41
  fontSize = 'calc(1em - 1px)';
@@ -52,21 +55,11 @@ const fontStyles = ({
52
55
  } else if ($isBold === false || $size !== 'inherit') {
53
56
  fontWeight = theme.fontWeights.regular;
54
57
  }
55
- if ($hue) {
56
- const options = $hue.includes('.') ? {
57
- variable: $hue,
58
- theme
59
- } : {
60
- hue: $hue,
61
- theme
62
- };
63
- color = getColor(options);
64
- }
65
58
  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);
66
59
  };
67
60
  const StyledFont = styled.div.attrs(props => ({
68
61
  'data-garden-id': COMPONENT_ID$a,
69
- 'data-garden-version': '9.12.6',
62
+ 'data-garden-version': '9.14.0',
70
63
  $size: props.$size ?? 'inherit'
71
64
  })).withConfig({
72
65
  displayName: "StyledFont",
package/dist/esm/styled/StyledIcon.js CHANGED
@@ -15,7 +15,7 @@ const sizeStyles$1 = props => {
15
15
  };
16
16
  const StyledIcon = styled(StyledBaseIcon).attrs({
17
17
  'data-garden-id': COMPONENT_ID$2,
18
- 'data-garden-version': '9.12.6'
18
+ 'data-garden-version': '9.14.0'
19
19
  }).withConfig({
20
20
  displayName: "StyledIcon",
21
21
  componentId: "sc-10rfb5b-0"
package/dist/esm/styled/StyledKbd.js CHANGED
@@ -41,7 +41,7 @@ const sizeStyles = ({
41
41
  };
42
42
  const StyledKbd = styled(StyledCode).attrs({
43
43
  'data-garden-id': COMPONENT_ID$1,
44
- 'data-garden-version': '9.12.6',
44
+ 'data-garden-version': '9.14.0',
45
45
  as: 'kbd'
46
46
  }).withConfig({
47
47
  displayName: "StyledKbd",
package/dist/esm/styled/StyledList.js CHANGED
@@ -14,7 +14,7 @@ const listStyles = props => {
14
14
  const ORDERED_ID$1 = 'typography.ordered_list';
15
15
  const StyledOrderedList = styled.ol.attrs({
16
16
  'data-garden-id': ORDERED_ID$1,
17
- 'data-garden-version': '9.12.6'
17
+ 'data-garden-version': '9.14.0'
18
18
  }).withConfig({
19
19
  displayName: "StyledList__StyledOrderedList",
20
20
  componentId: "sc-jdbsfi-0"
@@ -22,7 +22,7 @@ const StyledOrderedList = styled.ol.attrs({
22
22
  const UNORDERED_ID$1 = 'typography.unordered_list';
23
23
  const StyledUnorderedList = styled.ul.attrs({
24
24
  'data-garden-id': UNORDERED_ID$1,
25
- 'data-garden-version': '9.12.6'
25
+ 'data-garden-version': '9.14.0'
26
26
  }).withConfig({
27
27
  displayName: "StyledList__StyledUnorderedList",
28
28
  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(props => ({
23
23
  'data-garden-id': ORDERED_ID,
24
- 'data-garden-version': '9.12.6',
24
+ 'data-garden-version': '9.14.0',
25
25
  as: 'li',
26
26
  $space: props.$space ?? 'medium'
27
27
  })).withConfig({
@@ -31,7 +31,7 @@ const StyledOrderedListItem = styled(StyledFont).attrs(props => ({
31
31
  const UNORDERED_ID = 'typography.unordered_list_item';
32
32
  const StyledUnorderedListItem = styled(StyledFont).attrs(props => ({
33
33
  'data-garden-id': UNORDERED_ID,
34
- 'data-garden-version': '9.12.6',
34
+ 'data-garden-version': '9.14.0',
35
35
  as: 'li',
36
36
  $space: props.$space ?? 'medium'
37
37
  })).withConfig({
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.12.6'
14
+ 'data-garden-version': '9.14.0'
15
15
  }).withConfig({
16
16
  displayName: "StyledParagraph",
17
17
  componentId: "sc-zkuftz-0"
package/dist/index.cjs.js CHANGED
@@ -48,10 +48,13 @@ const fontStyles = ({
48
48
  const monospace = $isMonospace && ['inherit', 'small', 'medium', 'large'].indexOf($size) !== -1;
49
49
  const fontFamily = monospace && theme.fonts.mono;
50
50
  const direction = theme.rtl ? 'rtl' : 'ltr';
51
+ const color = $hue ? reactTheming.getHueColor({
52
+ theme,
53
+ value: $hue
54
+ }) : undefined;
51
55
  let fontSize;
52
56
  let fontWeight;
53
57
  let lineHeight;
54
- let color;
55
58
  if (monospace) {
56
59
  if ($size === 'inherit') {
57
60
  fontSize = 'calc(1em - 1px)';
@@ -71,21 +74,11 @@ const fontStyles = ({
71
74
  } else if ($isBold === false || $size !== 'inherit') {
72
75
  fontWeight = theme.fontWeights.regular;
73
76
  }
74
- if ($hue) {
75
- const options = $hue.includes('.') ? {
76
- variable: $hue,
77
- theme
78
- } : {
79
- hue: $hue,
80
- theme
81
- };
82
- color = reactTheming.getColor(options);
83
- }
84
77
  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);
85
78
  };
86
79
  const StyledFont = styled__default.default.div.attrs(props => ({
87
80
  'data-garden-id': COMPONENT_ID$a,
88
- 'data-garden-version': '9.12.6',
81
+ 'data-garden-version': '9.14.0',
89
82
  $size: props.$size ?? 'inherit'
90
83
  })).withConfig({
91
84
  displayName: "StyledFont",
@@ -95,7 +88,7 @@ const StyledFont = styled__default.default.div.attrs(props => ({
95
88
  const COMPONENT_ID$9 = 'typography.blockquote';
96
89
  const StyledBlockquote = styled__default.default.blockquote.attrs({
97
90
  'data-garden-id': COMPONENT_ID$9,
98
- 'data-garden-version': '9.12.6'
91
+ 'data-garden-version': '9.14.0'
99
92
  }).withConfig({
100
93
  displayName: "StyledBlockquote",
101
94
  componentId: "sc-1tt3ye0-0"
@@ -145,7 +138,7 @@ const colorStyles$3 = ({
145
138
  };
146
139
  const StyledCode = styled__default.default(StyledFont).attrs(props => ({
147
140
  'data-garden-id': COMPONENT_ID$8,
148
- 'data-garden-version': '9.12.6',
141
+ 'data-garden-version': '9.14.0',
149
142
  as: 'code',
150
143
  $isMonospace: true,
151
144
  $hue: props.$hue ?? 'grey',
@@ -171,7 +164,7 @@ const colorStyles$2 = ({
171
164
  };
172
165
  const StyledCodeBlock = styled__default.default.pre.attrs({
173
166
  'data-garden-id': COMPONENT_ID$7,
174
- 'data-garden-version': '9.12.6'
167
+ 'data-garden-version': '9.14.0'
175
168
  }).withConfig({
176
169
  displayName: "StyledCodeBlock",
177
170
  componentId: "sc-5wky57-0"
@@ -180,7 +173,7 @@ const StyledCodeBlock = styled__default.default.pre.attrs({
180
173
  const COMPONENT_ID$6 = 'typography.codeblock_container';
181
174
  const StyledCodeBlockContainer = styled__default.default.div.attrs({
182
175
  'data-garden-id': COMPONENT_ID$6,
183
- 'data-garden-version': '9.12.6'
176
+ 'data-garden-version': '9.14.0'
184
177
  }).withConfig({
185
178
  displayName: "StyledCodeBlockContainer",
186
179
  componentId: "sc-14zgbfw-0"
@@ -264,7 +257,7 @@ const lineNumberStyles = ({
264
257
  };
265
258
  const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
266
259
  'data-garden-id': COMPONENT_ID$5,
267
- 'data-garden-version': '9.12.6',
260
+ 'data-garden-version': '9.14.0',
268
261
  as: 'code',
269
262
  $isMonospace: true
270
263
  }).withConfig({
@@ -434,7 +427,7 @@ const colorStyles = ({
434
427
  };
435
428
  const StyledCodeBlockToken = styled__default.default.span.attrs({
436
429
  'data-garden-id': COMPONENT_ID$4,
437
- 'data-garden-version': '9.12.6'
430
+ 'data-garden-version': '9.14.0'
438
431
  }).withConfig({
439
432
  displayName: "StyledCodeBlockToken",
440
433
  componentId: "sc-1hkshdq-0"
@@ -443,7 +436,7 @@ const StyledCodeBlockToken = styled__default.default.span.attrs({
443
436
  const COMPONENT_ID$3 = 'typography.ellipsis';
444
437
  const StyledEllipsis = styled__default.default.div.attrs({
445
438
  'data-garden-id': COMPONENT_ID$3,
446
- 'data-garden-version': '9.12.6'
439
+ 'data-garden-version': '9.14.0'
447
440
  }).withConfig({
448
441
  displayName: "StyledEllipsis",
449
442
  componentId: "sc-1u4uqmy-0"
@@ -457,7 +450,7 @@ const sizeStyles$1 = props => {
457
450
  };
458
451
  const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
459
452
  'data-garden-id': COMPONENT_ID$2,
460
- 'data-garden-version': '9.12.6'
453
+ 'data-garden-version': '9.14.0'
461
454
  }).withConfig({
462
455
  displayName: "StyledIcon",
463
456
  componentId: "sc-10rfb5b-0"
@@ -495,7 +488,7 @@ const sizeStyles = ({
495
488
  };
496
489
  const StyledKbd = styled__default.default(StyledCode).attrs({
497
490
  'data-garden-id': COMPONENT_ID$1,
498
- 'data-garden-version': '9.12.6',
491
+ 'data-garden-version': '9.14.0',
499
492
  as: 'kbd'
500
493
  }).withConfig({
501
494
  displayName: "StyledKbd",
@@ -509,7 +502,7 @@ const listStyles = props => {
509
502
  const ORDERED_ID$1 = 'typography.ordered_list';
510
503
  const StyledOrderedList = styled__default.default.ol.attrs({
511
504
  'data-garden-id': ORDERED_ID$1,
512
- 'data-garden-version': '9.12.6'
505
+ 'data-garden-version': '9.14.0'
513
506
  }).withConfig({
514
507
  displayName: "StyledList__StyledOrderedList",
515
508
  componentId: "sc-jdbsfi-0"
@@ -517,7 +510,7 @@ const StyledOrderedList = styled__default.default.ol.attrs({
517
510
  const UNORDERED_ID$1 = 'typography.unordered_list';
518
511
  const StyledUnorderedList = styled__default.default.ul.attrs({
519
512
  'data-garden-id': UNORDERED_ID$1,
520
- 'data-garden-version': '9.12.6'
513
+ 'data-garden-version': '9.14.0'
521
514
  }).withConfig({
522
515
  displayName: "StyledList__StyledUnorderedList",
523
516
  componentId: "sc-jdbsfi-1"
@@ -534,7 +527,7 @@ const listItemStyles = props => {
534
527
  const ORDERED_ID = 'typography.ordered_list_item';
535
528
  const StyledOrderedListItem = styled__default.default(StyledFont).attrs(props => ({
536
529
  'data-garden-id': ORDERED_ID,
537
- 'data-garden-version': '9.12.6',
530
+ 'data-garden-version': '9.14.0',
538
531
  as: 'li',
539
532
  $space: props.$space ?? 'medium'
540
533
  })).withConfig({
@@ -544,7 +537,7 @@ const StyledOrderedListItem = styled__default.default(StyledFont).attrs(props =>
544
537
  const UNORDERED_ID = 'typography.unordered_list_item';
545
538
  const StyledUnorderedListItem = styled__default.default(StyledFont).attrs(props => ({
546
539
  'data-garden-id': UNORDERED_ID,
547
- 'data-garden-version': '9.12.6',
540
+ 'data-garden-version': '9.14.0',
548
541
  as: 'li',
549
542
  $space: props.$space ?? 'medium'
550
543
  })).withConfig({
@@ -555,7 +548,7 @@ const StyledUnorderedListItem = styled__default.default(StyledFont).attrs(props
555
548
  const COMPONENT_ID = 'typography.paragraph';
556
549
  const StyledParagraph = styled__default.default.p.attrs({
557
550
  'data-garden-id': COMPONENT_ID,
558
- 'data-garden-version': '9.12.6'
551
+ 'data-garden-version': '9.14.0'
559
552
  }).withConfig({
560
553
  displayName: "StyledParagraph",
561
554
  componentId: "sc-zkuftz-0"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-typography",
3
- "version": "9.12.6",
3
+ "version": "9.14.0",
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>",
@@ -27,13 +27,13 @@
27
27
  "prop-types": "^15.5.7"
28
28
  },
29
29
  "peerDependencies": {
30
- "@zendeskgarden/react-theming": ">=9.0.0",
30
+ "@zendeskgarden/react-theming": ">=9.14.0",
31
31
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
32
32
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
33
33
  "styled-components": "^5.3.1 || ^6.0.0"
34
34
  },
35
35
  "devDependencies": {
36
- "@zendeskgarden/react-theming": "^9.12.6"
36
+ "@zendeskgarden/react-theming": "^9.14.0"
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": "d7c8d8c74f98a86af16fb6a1143ef6eaf89e888b"
48
+ "gitHead": "75fd88fc9ea5e6dd48a188d6a15c93a98356b0b7"
49
49
  }