Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@hig/button
Advanced tools
@hig/button - npm Package Compare versions
Comparing version 1.4.3 to 1.4.4
@@ -43,12 +43,12 @@ import React, { Component } from 'react'; | ||
| boxSizing: "border-box", | ||
| color: themeData["colorScheme.textColor"], | ||
| color: themeData["button.solid.label.fontColor"], | ||
| cursor: "pointer", | ||
| display: "inline-block", | ||
| fontFamily: themeData["button.fontFamily"], | ||
| fontSize: themeData["button.fontSize"], | ||
| fontWeight: themeData["button.fontWeight"], | ||
| lineHeight: themeData["button.lineHeight"], | ||
| fontFamily: themeData["button.label.fontFamily"], | ||
| fontSize: themeData["button.label.fontSize"], | ||
| fontWeight: themeData["button.label.fontWeight"], | ||
| lineHeight: themeData["button.label.lineHeight"], | ||
| margin: "0", | ||
| overflow: "hidden", | ||
| padding: themeData["button.verticalPadding"] + "\n " + themeData["button.horizontalPadding"], | ||
| padding: themeData["button.paddingVertical"] + "\n " + themeData["button.paddingHorizontal"], | ||
| position: "relative", | ||
@@ -74,9 +74,9 @@ textAlign: "center", | ||
| return { | ||
| background: themeData["button.solid.backgroundColor"], | ||
| color: themeData["button.solid.textColor"], | ||
| background: themeData["button.solid.default.backgroundColor"], | ||
| color: themeData["button.solid.label.fontColor"], | ||
| "&:visited": { | ||
| color: themeData["button.solid.textColor"] | ||
| color: themeData["button.solid.label.fontColor"] | ||
| }, | ||
| "svg *": { | ||
| fill: themeData["button.solid.icon.color"] | ||
| fill: themeData["button.solid.iconColor"] | ||
| } | ||
@@ -90,9 +90,9 @@ }; | ||
| background: "none", | ||
| borderColor: themeData["button.outline.borderColor"], | ||
| color: themeData["button.outline.textColor"], | ||
| borderColor: themeData["button.outline.default.borderColor"], | ||
| color: themeData["button.outline.label.fontColor"], | ||
| "&:visited": { | ||
| color: themeData["button.outline.textColor"] | ||
| color: themeData["button.outline.label.fontColor"] | ||
| }, | ||
| "svg *": { | ||
| fill: themeData["button.outline.icon.color"] | ||
| fill: themeData["button.outline.iconColor"] | ||
| } | ||
@@ -105,9 +105,9 @@ }; | ||
| background: "none", | ||
| borderColor: themeData["button.flat.borderColor"], | ||
| color: themeData["button.flat.textColor"], | ||
| borderColor: themeData["button.flat.default.borderColor"], | ||
| color: themeData["button.flat.label.fontColor"], | ||
| "&:visited": { | ||
| color: themeData["button.flat.textColor"] | ||
| color: themeData["button.flat.label.fontColor"] | ||
| }, | ||
| "svg *": { | ||
| fill: themeData["button.flat.icon.color"] | ||
| fill: themeData["button.flat.iconColor"] | ||
| } | ||
@@ -123,3 +123,3 @@ }; | ||
| return { | ||
| opacity: themeData["component.disabled.opacity"], | ||
| opacity: themeData["colorScheme.opacity.disabled"], | ||
| cursor: "default", | ||
@@ -140,3 +140,3 @@ pointerEvents: "none" | ||
| background: themeData["button.solid.hover.backgroundColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.halo.width"] + " " + themeData["button.solid.hover.halo.color"] | ||
| boxShadow: "0 0 0 " + themeData["button.haloWidth"] + " " + themeData["button.hover.haloColor"] | ||
| }; | ||
@@ -147,3 +147,3 @@ case types.OUTLINE: | ||
| borderColor: themeData["button.outline.hover.borderColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.halo.width"] + " " + themeData["button.outline.hover.halo.color"] | ||
| boxShadow: "0 0 0 " + themeData["button.haloWidth"] + " " + themeData["button.hover.haloColor"] | ||
| }; | ||
@@ -153,3 +153,3 @@ case types.FLAT: | ||
| borderColor: themeData["button.flat.hover.borderColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.halo.width"] + " " + themeData["button.flat.hover.halo.color"] | ||
| boxShadow: "0 0 0 " + themeData["button.haloWidth"] + " " + themeData["button.hover.haloColor"] | ||
| }; | ||
@@ -167,3 +167,3 @@ default: | ||
| background: themeData["button.solid.focus.backgroundColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.halo.width"] + " " + themeData["button.solid.focus.halo.color"], | ||
| boxShadow: "0 0 0 " + themeData["button.haloWidth"] + " " + themeData["button.focus.haloColor"], | ||
| outline: "none" | ||
@@ -176,7 +176,7 @@ }; | ||
| borderColor: themeData["button.outline.focus.borderColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.halo.width"] + " " + themeData["button.outline.focus.halo.color"], | ||
| color: themeData["button.outline.focus.textColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.haloWidth"] + " " + themeData["button.focus.haloColor"], | ||
| color: themeData["button.outline.label.fontColor"], | ||
| outline: "none", | ||
| "svg *": { | ||
| fill: themeData["button.outline.focus.icon.color"] | ||
| fill: themeData["button.outline.iconColor"] | ||
| } | ||
@@ -188,7 +188,7 @@ }; | ||
| borderColor: themeData["button.flat.focus.borderColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.halo.width"] + " " + themeData["button.flat.focus.halo.color"], | ||
| color: themeData["button.flat.focus.textColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.haloWidth"] + " " + themeData["button.focus.haloColor"], | ||
| color: themeData["button.flat.label.fontColor"], | ||
| outline: "none", | ||
| "svg *": { | ||
| fill: themeData["button.flat.focus.icon.color"] | ||
| fill: themeData["button.flat.iconColor"] | ||
| } | ||
@@ -206,3 +206,3 @@ }; | ||
| return { | ||
| boxShadow: "0 0 0 " + themeData["button.solid.pressed.haloWidth"] + " " + themeData["button.solid.pressed.halo.color"] | ||
| boxShadow: "0 0 0 " + themeData["button.pressed.haloWidth"] + " " + themeData["button.pressed.haloColor"] | ||
| }; | ||
@@ -213,7 +213,7 @@ case types.OUTLINE: | ||
| borderColor: themeData["button.outline.pressed.borderColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.outline.pressed.haloWidth"] + " " + themeData["button.outline.pressed.halo.color"] | ||
| boxShadow: "0 0 0 " + themeData["button.pressed.haloWidth"] + " " + themeData["button.pressed.haloColor"] | ||
| }; | ||
| case types.FLAT: | ||
| return { | ||
| boxShadow: "0 0 0 " + themeData["button.flat.pressed.haloWidth"] + " " + themeData["button.flat.pressed.halo.color"] | ||
| boxShadow: "0 0 0 " + themeData["button.pressed.haloWidth"] + " " + themeData["button.pressed.haloColor"] | ||
| }; | ||
@@ -241,3 +241,3 @@ default: | ||
| height: iconSize, | ||
| marginRight: themeData["button.gutter"], | ||
| marginRight: themeData["button.gutterWidth"], | ||
| top: "50%", | ||
@@ -247,3 +247,3 @@ transform: "translateY(-50%)" | ||
| iconText: { | ||
| marginLeft: "calc(" + iconSize + " + " + themeData["button.gutter"] + ")" | ||
| marginLeft: "calc(" + iconSize + " + " + themeData["button.gutterWidth"] + ")" | ||
| } | ||
@@ -250,0 +250,0 @@ }; |
@@ -50,12 +50,12 @@ 'use strict'; | ||
| boxSizing: "border-box", | ||
| color: themeData["colorScheme.textColor"], | ||
| color: themeData["button.solid.label.fontColor"], | ||
| cursor: "pointer", | ||
| display: "inline-block", | ||
| fontFamily: themeData["button.fontFamily"], | ||
| fontSize: themeData["button.fontSize"], | ||
| fontWeight: themeData["button.fontWeight"], | ||
| lineHeight: themeData["button.lineHeight"], | ||
| fontFamily: themeData["button.label.fontFamily"], | ||
| fontSize: themeData["button.label.fontSize"], | ||
| fontWeight: themeData["button.label.fontWeight"], | ||
| lineHeight: themeData["button.label.lineHeight"], | ||
| margin: "0", | ||
| overflow: "hidden", | ||
| padding: themeData["button.verticalPadding"] + "\n " + themeData["button.horizontalPadding"], | ||
| padding: themeData["button.paddingVertical"] + "\n " + themeData["button.paddingHorizontal"], | ||
| position: "relative", | ||
@@ -81,9 +81,9 @@ textAlign: "center", | ||
| return { | ||
| background: themeData["button.solid.backgroundColor"], | ||
| color: themeData["button.solid.textColor"], | ||
| background: themeData["button.solid.default.backgroundColor"], | ||
| color: themeData["button.solid.label.fontColor"], | ||
| "&:visited": { | ||
| color: themeData["button.solid.textColor"] | ||
| color: themeData["button.solid.label.fontColor"] | ||
| }, | ||
| "svg *": { | ||
| fill: themeData["button.solid.icon.color"] | ||
| fill: themeData["button.solid.iconColor"] | ||
| } | ||
@@ -97,9 +97,9 @@ }; | ||
| background: "none", | ||
| borderColor: themeData["button.outline.borderColor"], | ||
| color: themeData["button.outline.textColor"], | ||
| borderColor: themeData["button.outline.default.borderColor"], | ||
| color: themeData["button.outline.label.fontColor"], | ||
| "&:visited": { | ||
| color: themeData["button.outline.textColor"] | ||
| color: themeData["button.outline.label.fontColor"] | ||
| }, | ||
| "svg *": { | ||
| fill: themeData["button.outline.icon.color"] | ||
| fill: themeData["button.outline.iconColor"] | ||
| } | ||
@@ -112,9 +112,9 @@ }; | ||
| background: "none", | ||
| borderColor: themeData["button.flat.borderColor"], | ||
| color: themeData["button.flat.textColor"], | ||
| borderColor: themeData["button.flat.default.borderColor"], | ||
| color: themeData["button.flat.label.fontColor"], | ||
| "&:visited": { | ||
| color: themeData["button.flat.textColor"] | ||
| color: themeData["button.flat.label.fontColor"] | ||
| }, | ||
| "svg *": { | ||
| fill: themeData["button.flat.icon.color"] | ||
| fill: themeData["button.flat.iconColor"] | ||
| } | ||
@@ -130,3 +130,3 @@ }; | ||
| return { | ||
| opacity: themeData["component.disabled.opacity"], | ||
| opacity: themeData["colorScheme.opacity.disabled"], | ||
| cursor: "default", | ||
@@ -147,3 +147,3 @@ pointerEvents: "none" | ||
| background: themeData["button.solid.hover.backgroundColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.halo.width"] + " " + themeData["button.solid.hover.halo.color"] | ||
| boxShadow: "0 0 0 " + themeData["button.haloWidth"] + " " + themeData["button.hover.haloColor"] | ||
| }; | ||
@@ -154,3 +154,3 @@ case types.OUTLINE: | ||
| borderColor: themeData["button.outline.hover.borderColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.halo.width"] + " " + themeData["button.outline.hover.halo.color"] | ||
| boxShadow: "0 0 0 " + themeData["button.haloWidth"] + " " + themeData["button.hover.haloColor"] | ||
| }; | ||
@@ -160,3 +160,3 @@ case types.FLAT: | ||
| borderColor: themeData["button.flat.hover.borderColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.halo.width"] + " " + themeData["button.flat.hover.halo.color"] | ||
| boxShadow: "0 0 0 " + themeData["button.haloWidth"] + " " + themeData["button.hover.haloColor"] | ||
| }; | ||
@@ -174,3 +174,3 @@ default: | ||
| background: themeData["button.solid.focus.backgroundColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.halo.width"] + " " + themeData["button.solid.focus.halo.color"], | ||
| boxShadow: "0 0 0 " + themeData["button.haloWidth"] + " " + themeData["button.focus.haloColor"], | ||
| outline: "none" | ||
@@ -183,7 +183,7 @@ }; | ||
| borderColor: themeData["button.outline.focus.borderColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.halo.width"] + " " + themeData["button.outline.focus.halo.color"], | ||
| color: themeData["button.outline.focus.textColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.haloWidth"] + " " + themeData["button.focus.haloColor"], | ||
| color: themeData["button.outline.label.fontColor"], | ||
| outline: "none", | ||
| "svg *": { | ||
| fill: themeData["button.outline.focus.icon.color"] | ||
| fill: themeData["button.outline.iconColor"] | ||
| } | ||
@@ -195,7 +195,7 @@ }; | ||
| borderColor: themeData["button.flat.focus.borderColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.halo.width"] + " " + themeData["button.flat.focus.halo.color"], | ||
| color: themeData["button.flat.focus.textColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.haloWidth"] + " " + themeData["button.focus.haloColor"], | ||
| color: themeData["button.flat.label.fontColor"], | ||
| outline: "none", | ||
| "svg *": { | ||
| fill: themeData["button.flat.focus.icon.color"] | ||
| fill: themeData["button.flat.iconColor"] | ||
| } | ||
@@ -213,3 +213,3 @@ }; | ||
| return { | ||
| boxShadow: "0 0 0 " + themeData["button.solid.pressed.haloWidth"] + " " + themeData["button.solid.pressed.halo.color"] | ||
| boxShadow: "0 0 0 " + themeData["button.pressed.haloWidth"] + " " + themeData["button.pressed.haloColor"] | ||
| }; | ||
@@ -220,7 +220,7 @@ case types.OUTLINE: | ||
| borderColor: themeData["button.outline.pressed.borderColor"], | ||
| boxShadow: "0 0 0 " + themeData["button.outline.pressed.haloWidth"] + " " + themeData["button.outline.pressed.halo.color"] | ||
| boxShadow: "0 0 0 " + themeData["button.pressed.haloWidth"] + " " + themeData["button.pressed.haloColor"] | ||
| }; | ||
| case types.FLAT: | ||
| return { | ||
| boxShadow: "0 0 0 " + themeData["button.flat.pressed.haloWidth"] + " " + themeData["button.flat.pressed.halo.color"] | ||
| boxShadow: "0 0 0 " + themeData["button.pressed.haloWidth"] + " " + themeData["button.pressed.haloColor"] | ||
| }; | ||
@@ -248,3 +248,3 @@ default: | ||
| height: iconSize, | ||
| marginRight: themeData["button.gutter"], | ||
| marginRight: themeData["button.gutterWidth"], | ||
| top: "50%", | ||
@@ -254,3 +254,3 @@ transform: "translateY(-50%)" | ||
| iconText: { | ||
| marginLeft: "calc(" + iconSize + " + " + themeData["button.gutter"] + ")" | ||
| marginLeft: "calc(" + iconSize + " + " + themeData["button.gutterWidth"] + ")" | ||
| } | ||
@@ -257,0 +257,0 @@ }; |
@@ -0,1 +1,8 @@ | ||
| # [@hig/button-v1.4.4](https://github.com/Autodesk/hig/compare/@hig/button@1.4.3...@hig/button@1.4.4) (2020-05-12) | ||
| ### Bug Fixes | ||
| * stop using deprecated theme-data roles ([98a91ef](https://github.com/Autodesk/hig/commit/98a91ef)) | ||
| # [@hig/button-v1.4.3](https://github.com/Autodesk/hig/compare/@hig/button@1.4.2...@hig/button@1.4.3) (2019-08-08) | ||
@@ -2,0 +9,0 @@ |
| { | ||
| "name": "@hig/button", | ||
| "version": "1.4.3", | ||
| "version": "1.4.4", | ||
| "description": "HIG Button", | ||
@@ -34,3 +34,3 @@ "author": "Autodesk Inc.", | ||
| "@hig/theme-context": "^3.0.0", | ||
| "@hig/theme-data": "^2.10.0", | ||
| "@hig/theme-data": "^2.16.0", | ||
| "react": "^15.4.1 || ^16.3.2" | ||
@@ -37,0 +37,0 @@ }, |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by0.38%
59889
No dependency changes