@hig/tabs - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

build/index.es.js

@@ -57,3 +57,3 @@ import React, { Component, Children } from 'react';
       width: "100%",
-      backgroundColor: themeData["tabs.underline.halo.hover.color"],
+      backgroundColor: themeData["tabs.underline.hover.haloColor"],
       overflow: "visible",
@@ -64,6 +64,6 @@ "&:after": {
         left: 0,
-        backgroundColor: themeData["tabs.general.halo.color"],
+        backgroundColor: themeData["tabs.focus.haloColor"],
         content: "\" \"",
         width: "100%",
-        height: !disabled && hasFocus ? themeData["tabs.general.halo.size"] : 0,
+        height: !disabled && hasFocus ? themeData["tabs.focus.haloWidth"] : 0,
         transitionDuration: "0.3s",
@@ -76,5 +76,5 @@ transitionProperty: "height"
       styles = _extends({}, styles, {
-        height: themeData["tabs.general.halo.size"]
+        height: themeData["tabs.focus.haloWidth"]
       }, (active || isPressed) && {
-        backgroundColor: themeData["tabs.underline.halo.active.color"]
+        backgroundColor: themeData["tabs.underline.active.haloColor"]
       });
@@ -85,3 +85,3 @@ }
       top: 0,
-      backgroundColor: themeData["tabs.general.halo.color"]
+      backgroundColor: themeData["tabs.focus.haloColor"]
     });
@@ -92,3 +92,3 @@
       if (!disabled && hasFocus) {
-        styles.width = themeData["tabs.general.halo.size"];
+        styles.width = themeData["tabs.focus.haloWidth"];
       }
@@ -98,3 +98,3 @@ } else {
       if (!disabled && hasFocus) {
-        styles.height = themeData["tabs.general.halo.size"];
+        styles.height = themeData["tabs.focus.haloWidth"];
       }
@@ -132,5 +132,5 @@ }
   if (icon && closable) {
-    return "calc(" + themeData["tabs.general.icon.size"] + " + " + themeData["tabs.general.icon.gutter"] + " + " + themeData["tabs.general.closeButton.size"] + ")";
+    return "calc(" + themeData["tabs.iconSize"] + " + " + themeData["tabs.iconGutter"] + " + " + themeData["tabs.closeButton.minSize"] + ")";
   }
-  if (icon) return themeData["tabs.general.icon.size"];
+  if (icon) return themeData["tabs.iconSize"];
 
@@ -181,5 +181,5 @@ return "0";
     }, variant === variants.BOX && {
-      padding: themeData["tabs.box.tab.verticalPadding"] + " " + themeData["tabs.box.tab.horizontalPadding"]
+      padding: themeData["tabs.box.tab.paddingVertical"] + " " + themeData["tabs.box.tab.paddingHorizontal"]
     }, variant === variants.CANVAS && {
-      padding: themeData["tabs.canvas.tab.verticalPadding"] + " " + themeData["tabs.canvas.tab.horizontalPadding"],
+      padding: themeData["tabs.canvas.tab.paddingVertical"] + " " + themeData["tabs.canvas.tab.paddingHorizontal"],
       transform: "skewX(-23deg)",
@@ -192,3 +192,3 @@ transformOrigin: "0 100%"
       transform: variant === variants.CANVAS ? "skewX(23deg)" : "none",
-      opacity: disabled ? themeData["component.disabled.opacity"] : "1",
+      opacity: disabled ? themeData["colorScheme.opacity.disabled"] : "1",
       width: getContentWrapperWidth(props, themeData),
@@ -201,12 +201,12 @@ display: orientation === orientations.VERTICAL ? "block" : "flex"
       background: "transparent",
-      fontFamily: themeData["tabs.general.tab.fontFamily"],
-      fontSize: themeData["tabs.general.tab.fontSize"],
-      fontWeight: active ? themeData["tabs.general.tab.active.fontWeight"] : themeData["tabs.general.tab.fontWeight"],
-      lineHeight: themeData["tabs.general.tab.lineHeight"],
+      fontFamily: themeData["tabs.label.fontFamily"],
+      fontSize: themeData["tabs.label.fontSize"],
+      fontWeight: active ? themeData["tabs.label.active.fontWeight"] : themeData["tabs.label.inactive.fontWeight"],
+      lineHeight: themeData["tabs.label.active.lineHeight"],
       textAlign: "center",
-      paddingLeft: icon && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.general.icon.size"] + " + " + themeData["tabs.general.icon.gutter"] + ")" : "0",
+      paddingLeft: icon && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.iconSize"] + " + " + themeData["tabs.iconGutter"] + ")" : "0",
 
-      paddingRight: closable && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.general.closeButton.size"] + " + " + themeData["tabs.general.closeButton.gutter"] + ")" : "0",
+      paddingRight: closable && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.closeButton.minSize"] + " + " + themeData["tabs.closeButton.gutter"] + ")" : "0",
 
-      color: themeData["tabs.general.tab.color"],
+      color: themeData["tabs.label.fontColor"],
 
@@ -218,5 +218,5 @@ // keep same amount of space whether it's active (bold font weight)
         content: "\"" + label + "\"",
-        fontFamily: themeData["tabs.general.tab.fontFamily"],
-        fontSize: themeData["tabs.general.tab.fontSize"],
-        fontWeight: themeData["tabs.general.tab.active.fontWeight"],
+        fontFamily: themeData["tabs.label.fontFamily"],
+        fontSize: themeData["tabs.label.fontSize"],
+        fontWeight: themeData["tabs.label.active.fontWeight"],
         height: "0",
@@ -234,5 +234,5 @@ color: "transparent",
       transform: "translateY(-50%)",
-      height: themeData["tabs." + variant + ".divider.height"],
-      width: themeData["tabs." + variant + ".divider.width"],
-      backgroundColor: themeData["tabs." + variant + ".divider.color"]
+      height: themeData["tabs." + variant + ".dividerHeight"],
+      width: themeData["tabs." + variant + ".dividerWidth"],
+      backgroundColor: themeData["tabs." + variant + ".divider.borderColor"]
     }),
@@ -245,4 +245,4 @@ icon: {
       transform: "translateY(-50%)",
-      height: themeData["tabs.general.icon.size"],
-      width: themeData["tabs.general.icon.size"],
+      height: themeData["tabs.iconSize"],
+      width: themeData["tabs.iconSize"],
       overflow: "hidden"
@@ -263,5 +263,5 @@ },
 
-  if (isPressed) return themeData["tabs.general.closeButton.pressed.color"];
-  if (hasHover) return themeData["tabs.general.closeButton.hover.color"];
-  return themeData["tabs.general.closeButton.color"];
+  if (isPressed) return themeData["tabs.closeButton.pressed.iconColor"];
+  if (hasHover) return themeData["tabs.closeButton.hover.iconColor"];
+  return themeData["tabs.closeButton.default.iconColor"];
 }
@@ -281,4 +281,4 @@
       margin: "0",
-      width: themeData["tabs.general.closeButton.size"],
-      height: themeData["tabs.general.closeButton.size"],
+      width: themeData["tabs.closeButton.minSize"],
+      height: themeData["tabs.closeButton.minSize"],
       cursor: "pointer",
@@ -285,0 +285,0 @@

build/index.js

@@ -64,3 +64,3 @@ 'use strict';
       width: "100%",
-      backgroundColor: themeData["tabs.underline.halo.hover.color"],
+      backgroundColor: themeData["tabs.underline.hover.haloColor"],
       overflow: "visible",
@@ -71,6 +71,6 @@ "&:after": {
         left: 0,
-        backgroundColor: themeData["tabs.general.halo.color"],
+        backgroundColor: themeData["tabs.focus.haloColor"],
         content: "\" \"",
         width: "100%",
-        height: !disabled && hasFocus ? themeData["tabs.general.halo.size"] : 0,
+        height: !disabled && hasFocus ? themeData["tabs.focus.haloWidth"] : 0,
         transitionDuration: "0.3s",
@@ -83,5 +83,5 @@ transitionProperty: "height"
       styles = _extends({}, styles, {
-        height: themeData["tabs.general.halo.size"]
+        height: themeData["tabs.focus.haloWidth"]
       }, (active || isPressed) && {
-        backgroundColor: themeData["tabs.underline.halo.active.color"]
+        backgroundColor: themeData["tabs.underline.active.haloColor"]
       });
@@ -92,3 +92,3 @@ }
       top: 0,
-      backgroundColor: themeData["tabs.general.halo.color"]
+      backgroundColor: themeData["tabs.focus.haloColor"]
     });
@@ -99,3 +99,3 @@
       if (!disabled && hasFocus) {
-        styles.width = themeData["tabs.general.halo.size"];
+        styles.width = themeData["tabs.focus.haloWidth"];
       }
@@ -105,3 +105,3 @@ } else {
       if (!disabled && hasFocus) {
-        styles.height = themeData["tabs.general.halo.size"];
+        styles.height = themeData["tabs.focus.haloWidth"];
       }
@@ -139,5 +139,5 @@ }
   if (icon && closable) {
-    return "calc(" + themeData["tabs.general.icon.size"] + " + " + themeData["tabs.general.icon.gutter"] + " + " + themeData["tabs.general.closeButton.size"] + ")";
+    return "calc(" + themeData["tabs.iconSize"] + " + " + themeData["tabs.iconGutter"] + " + " + themeData["tabs.closeButton.minSize"] + ")";
   }
-  if (icon) return themeData["tabs.general.icon.size"];
+  if (icon) return themeData["tabs.iconSize"];
 
@@ -188,5 +188,5 @@ return "0";
     }, variant === variants.BOX && {
-      padding: themeData["tabs.box.tab.verticalPadding"] + " " + themeData["tabs.box.tab.horizontalPadding"]
+      padding: themeData["tabs.box.tab.paddingVertical"] + " " + themeData["tabs.box.tab.paddingHorizontal"]
     }, variant === variants.CANVAS && {
-      padding: themeData["tabs.canvas.tab.verticalPadding"] + " " + themeData["tabs.canvas.tab.horizontalPadding"],
+      padding: themeData["tabs.canvas.tab.paddingVertical"] + " " + themeData["tabs.canvas.tab.paddingHorizontal"],
       transform: "skewX(-23deg)",
@@ -199,3 +199,3 @@ transformOrigin: "0 100%"
       transform: variant === variants.CANVAS ? "skewX(23deg)" : "none",
-      opacity: disabled ? themeData["component.disabled.opacity"] : "1",
+      opacity: disabled ? themeData["colorScheme.opacity.disabled"] : "1",
       width: getContentWrapperWidth(props, themeData),
@@ -208,12 +208,12 @@ display: orientation === orientations.VERTICAL ? "block" : "flex"
       background: "transparent",
-      fontFamily: themeData["tabs.general.tab.fontFamily"],
-      fontSize: themeData["tabs.general.tab.fontSize"],
-      fontWeight: active ? themeData["tabs.general.tab.active.fontWeight"] : themeData["tabs.general.tab.fontWeight"],
-      lineHeight: themeData["tabs.general.tab.lineHeight"],
+      fontFamily: themeData["tabs.label.fontFamily"],
+      fontSize: themeData["tabs.label.fontSize"],
+      fontWeight: active ? themeData["tabs.label.active.fontWeight"] : themeData["tabs.label.inactive.fontWeight"],
+      lineHeight: themeData["tabs.label.active.lineHeight"],
       textAlign: "center",
-      paddingLeft: icon && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.general.icon.size"] + " + " + themeData["tabs.general.icon.gutter"] + ")" : "0",
+      paddingLeft: icon && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.iconSize"] + " + " + themeData["tabs.iconGutter"] + ")" : "0",
 
-      paddingRight: closable && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.general.closeButton.size"] + " + " + themeData["tabs.general.closeButton.gutter"] + ")" : "0",
+      paddingRight: closable && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.closeButton.minSize"] + " + " + themeData["tabs.closeButton.gutter"] + ")" : "0",
 
-      color: themeData["tabs.general.tab.color"],
+      color: themeData["tabs.label.fontColor"],
 
@@ -225,5 +225,5 @@ // keep same amount of space whether it's active (bold font weight)
         content: "\"" + label + "\"",
-        fontFamily: themeData["tabs.general.tab.fontFamily"],
-        fontSize: themeData["tabs.general.tab.fontSize"],
-        fontWeight: themeData["tabs.general.tab.active.fontWeight"],
+        fontFamily: themeData["tabs.label.fontFamily"],
+        fontSize: themeData["tabs.label.fontSize"],
+        fontWeight: themeData["tabs.label.active.fontWeight"],
         height: "0",
@@ -241,5 +241,5 @@ color: "transparent",
       transform: "translateY(-50%)",
-      height: themeData["tabs." + variant + ".divider.height"],
-      width: themeData["tabs." + variant + ".divider.width"],
-      backgroundColor: themeData["tabs." + variant + ".divider.color"]
+      height: themeData["tabs." + variant + ".dividerHeight"],
+      width: themeData["tabs." + variant + ".dividerWidth"],
+      backgroundColor: themeData["tabs." + variant + ".divider.borderColor"]
     }),
@@ -252,4 +252,4 @@ icon: {
       transform: "translateY(-50%)",
-      height: themeData["tabs.general.icon.size"],
-      width: themeData["tabs.general.icon.size"],
+      height: themeData["tabs.iconSize"],
+      width: themeData["tabs.iconSize"],
       overflow: "hidden"
@@ -270,5 +270,5 @@ },
 
-  if (isPressed) return themeData["tabs.general.closeButton.pressed.color"];
-  if (hasHover) return themeData["tabs.general.closeButton.hover.color"];
-  return themeData["tabs.general.closeButton.color"];
+  if (isPressed) return themeData["tabs.closeButton.pressed.iconColor"];
+  if (hasHover) return themeData["tabs.closeButton.hover.iconColor"];
+  return themeData["tabs.closeButton.default.iconColor"];
 }
@@ -288,4 +288,4 @@
       margin: "0",
-      width: themeData["tabs.general.closeButton.size"],
-      height: themeData["tabs.general.closeButton.size"],
+      width: themeData["tabs.closeButton.minSize"],
+      height: themeData["tabs.closeButton.minSize"],
       cursor: "pointer",
@@ -292,0 +292,0 @@

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/tabs-v1.2.1](https://github.com/Autodesk/hig/compare/@hig/tabs@1.2.0...@hig/tabs@1.2.1) (2020-05-13)
+
+
+### Bug Fixes
+
+* stop using deprecated theme-data roles ([e963079](https://github.com/Autodesk/hig/commit/e963079))
+
 # [@hig/tabs-v1.2.0](https://github.com/Autodesk/hig/compare/@hig/tabs@1.1.1...@hig/tabs@1.2.0) (2020-03-23)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/tabs",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "HIG Tabs",
@@ -22,3 +22,3 @@ "author": "Autodesk Inc.",
     "@hig/typography": "^1.0.3",
-    "@hig/icons": "^3.1.0",
+    "@hig/icons": "^3.2.0",
     "@hig/utils": "^0.4.0",
@@ -32,3 +32,3 @@ "emotion": "^10.0.0",
     "@hig/theme-context": "^3.0.0",
-    "@hig/theme-data": "^2.15.1",
+    "@hig/theme-data": "^2.16.0",
     "react": "^15.4.1 || ^16.3.2"
@@ -35,0 +35,0 @@ },

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

Worsened metrics

Total package byte prevSize

110290

decreased by-0.05%

Dependency changes

• Updated@hig/icons@^3.2.0