@zendeskgarden/react-typography - npm Package Compare versions

Comparing version 9.0.0-next.21 to 9.0.0-next.22

dist/esm/styled/StyledBlockquote.js

@@ -14,3 +14,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -17,0 +17,0 @@ displayName: "StyledBlockquote",

dist/esm/styled/StyledCode.js

@@ -53,3 +53,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.22',
   as: 'code',
@@ -56,0 +56,0 @@ isMonospace: true

dist/esm/styled/StyledCodeBlock.js

@@ -27,3 +27,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -30,0 +30,0 @@ displayName: "StyledCodeBlock",

dist/esm/styled/StyledCodeBlockContainer.js

@@ -13,3 +13,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -16,0 +16,0 @@ displayName: "StyledCodeBlockContainer",

dist/esm/styled/StyledCodeBlockLine.js

@@ -89,3 +89,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.22',
   as: 'code',
@@ -92,0 +92,0 @@ isMonospace: true

dist/esm/styled/StyledCodeBlockToken.js

@@ -174,3 +174,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -177,0 +177,0 @@ displayName: "StyledCodeBlockToken",

dist/esm/styled/StyledEllipsis.js

@@ -13,3 +13,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -16,0 +16,0 @@ displayName: "StyledEllipsis",

dist/esm/styled/StyledFont.js

@@ -57,12 +57,16 @@ /**
   if (hue) {
-    color = getColor({
+    const options = hue.includes('.') ? {
+      variable: hue,
+      theme
+    } : {
       hue,
       theme
-    });
+    };
+    color = getColor(options);
   }
-  return css(["line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
+  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);
 };
 const StyledFont = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -69,0 +73,0 @@ displayName: "StyledFont",

dist/esm/styled/StyledIcon.js

@@ -18,3 +18,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -21,0 +21,0 @@ displayName: "StyledIcon",

dist/esm/styled/StyledList.js

@@ -17,3 +17,3 @@ /**
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -29,3 +29,3 @@ displayName: "StyledList__StyledOrderedList",
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -32,0 +32,0 @@ displayName: "StyledList__StyledUnorderedList",

dist/esm/styled/StyledListItem.js

@@ -24,3 +24,3 @@ /**
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.22',
   as: 'li'
@@ -38,3 +38,3 @@ }).withConfig({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.22',
   as: 'li'
@@ -41,0 +41,0 @@ }).withConfig({

dist/esm/styled/StyledParagraph.js

@@ -14,3 +14,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -17,0 +17,0 @@ displayName: "StyledParagraph",

dist/index.cjs.js

@@ -75,12 +75,16 @@ /**
   if (hue) {
-    color = reactTheming.getColor({
+    const options = hue.includes('.') ? {
+      variable: hue,
+      theme
+    } : {
       hue,
       theme
-    });
+    };
+    color = reactTheming.getColor(options);
   }
-  return styled.css(["line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
+  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);
 };
 const StyledFont = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -98,3 +102,3 @@ displayName: "StyledFont",
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -153,3 +157,3 @@ displayName: "StyledBlockquote",
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.22',
   as: 'code',
@@ -184,3 +188,3 @@ isMonospace: true
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -197,3 +201,3 @@ displayName: "StyledCodeBlock",
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -287,3 +291,3 @@ displayName: "StyledCodeBlockContainer",
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.22',
   as: 'code',
@@ -462,3 +466,3 @@ isMonospace: true
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -475,3 +479,3 @@ displayName: "StyledCodeBlockToken",
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -493,3 +497,3 @@ displayName: "StyledEllipsis",
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -510,3 +514,3 @@ displayName: "StyledIcon",
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -522,3 +526,3 @@ displayName: "StyledList__StyledOrderedList",
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -543,3 +547,3 @@ displayName: "StyledList__StyledUnorderedList",
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.22',
   as: 'li'
@@ -557,3 +561,3 @@ }).withConfig({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.22',
   as: 'li'
@@ -572,3 +576,3 @@ }).withConfig({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
@@ -575,0 +579,0 @@ displayName: "StyledParagraph",

dist/typings/types/index.d.ts

@@ -80,4 +80,6 @@ /**
     /**
-     * Applies a font color. Use [PALETTE](/components/palette#palette) colors
-     * when possible. Accepts all hex values.
+     * Applies a font color. Use a [color
+     * variable](/components/theme-object#colors) key (i.e. `foreground.subtle`)
+     * or [PALETTE](/components/palette#palette) colors when possible. Accepts all
+     * hex values.
      */
@@ -84,0 +86,0 @@ hue?: string;

package.json

 {
   "name": "@zendeskgarden/react-typography",
-  "version": "9.0.0-next.21",
+  "version": "9.0.0-next.22",
   "description": "Components relating to typography in the Garden Design System",
@@ -37,3 +37,3 @@ "license": "Apache-2.0",
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.21"
+    "@zendeskgarden/react-theming": "^9.0.0-next.22"
   },
@@ -50,3 +50,3 @@ "keywords": [
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a245ce2b794ea65142174a6a1f855a111b2677a2"
+  "gitHead": "46309385a1495c2297da23409f4196f662fe418b"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

114179

increased by0.31%

Lines of code

3064

increased by0.33%

No dependency changes