Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@hig/input
Advanced tools
@hig/input - npm Package Compare versions
Comparing version 1.2.0 to 1.2.1
@@ -30,4 +30,4 @@ import React from 'react'; | ||
| var defaults = { | ||
| color: themeData["input.fontColor"], | ||
| height: "calc(" + themeData["input.height"] + " - 2px)", | ||
| color: themeData["input.value.fontColor"], | ||
| height: "calc(" + themeData["input.minHeight"] + " - 2px)", | ||
| transitionProperty: "color", | ||
@@ -56,24 +56,24 @@ transitionDuration: "0.3s" | ||
| input: _extends({ | ||
| backgroundColor: props.variant === variants.BOX ? themeData["input.box.backgroundColor"] : "transparent", | ||
| backgroundColor: props.variant === variants.BOX ? themeData["input.box.default.backgroundColor"] : "transparent", | ||
| boxSizing: "border-box", | ||
| border: "none", | ||
| appearance: "none", | ||
| paddingTop: themeData["input.verticalPadding"], | ||
| paddingRight: props.variant === variants.BOX ? themeData["input.boxType.horizontalPadding"] : themeData["input.horizontalPadding"], | ||
| paddingBottom: themeData["input.verticalPadding"], | ||
| paddingLeft: props.variant === variants.BOX ? themeData["input.boxType.horizontalPadding"] : themeData["input.horizontalPadding"], | ||
| paddingTop: themeData["input.paddingVertical"], | ||
| paddingRight: props.variant === variants.BOX ? themeData["input.box.paddingHorizontal"] : themeData["input.line.paddingHorizontal"], | ||
| paddingBottom: themeData["input.paddingVertical"], | ||
| paddingLeft: props.variant === variants.BOX ? themeData["input.box.paddingHorizontal"] : themeData["input.line.paddingHorizontal"], | ||
| outline: "none", | ||
| fontSize: themeData["density.fontSizes.medium"], | ||
| fontFamily: themeData["input.fontFamily"], | ||
| fontWeight: themeData["input.fontWeight"], | ||
| lineHeight: themeData["input.lineHeight"], | ||
| fontSize: themeData["input.value.fontSize"], | ||
| fontFamily: themeData["input.value.fontFamily"], | ||
| fontWeight: themeData["input.value.fontWeight"], | ||
| lineHeight: themeData["input.value.lineHeight"], | ||
| width: "100%", | ||
| "&::placeholder": { | ||
| color: themeData["input.placeholder.fontColor"] | ||
| color: themeData["input.value.placeholderFontColor"] | ||
| }, | ||
| "&::-ms-input-placeholder": { | ||
| color: themeData["input.placeholder.fontColor"] | ||
| color: themeData["input.value.placeholderFontColor"] | ||
| }, | ||
| "::selection": { | ||
| backgroundColor: themeData["input.highlightColor"] | ||
| backgroundColor: themeData["input.value.highlightColor"] | ||
| } | ||
@@ -245,8 +245,8 @@ }, inputStyles(props, themeData)) | ||
| borderWidth: themeData["input.borderWidth"], | ||
| borderBottomColor: themeData["input.borderBottomColor"] | ||
| borderBottomColor: themeData["input.line.default.borderBottomColor"] | ||
| }; | ||
| return variant === variants.BOX ? _extends$2({}, defaults, { | ||
| borderColor: themeData["input.borderColor"], | ||
| borderBottomColor: themeData["input.box.borderBottomColor"] | ||
| borderColor: themeData["input.box.default.borderColor"], | ||
| borderBottomColor: themeData["input.box.default.borderColor"] | ||
| }) : defaults; | ||
@@ -273,3 +273,3 @@ } | ||
| return _extends$2({}, defaults, { | ||
| borderBottomColor: themeData["input.focus.borderBottomColor"] | ||
| borderBottomColor: themeData["input.line.focus.borderBottomColor"] | ||
| }); | ||
@@ -279,3 +279,3 @@ } | ||
| return _extends$2({}, defaults, { | ||
| borderBottomColor: themeData["input.hover.borderBottomColor"] | ||
| borderBottomColor: themeData["input.box.hover.borderBottomColor"] | ||
| }); | ||
@@ -298,3 +298,3 @@ } | ||
| height: 0, | ||
| backgroundColor: themeData["input.halo.color"], | ||
| backgroundColor: themeData["input.hover.haloColor"], | ||
| transitionProperty: "height, color", | ||
@@ -309,4 +309,4 @@ transitionDuration: "0.3s, 0.3s" | ||
| return { | ||
| height: themeData["input.focus.halo.width"], | ||
| backgroundColor: themeData["input.focus.halo.color"], | ||
| height: themeData["input.haloWidth"], | ||
| backgroundColor: themeData["input.focus.haloColor"], | ||
| transitionDuration: "0.1s, 0.1s" | ||
@@ -317,3 +317,3 @@ }; | ||
| return _extends$2({}, defaults, { | ||
| height: themeData["input.hover.halo.width"], | ||
| height: themeData["input.haloWidth"], | ||
| transitionDuration: "0.1s, 0.1s" | ||
@@ -320,0 +320,0 @@ }); |
@@ -36,4 +36,4 @@ 'use strict'; | ||
| var defaults = { | ||
| color: themeData["input.fontColor"], | ||
| height: "calc(" + themeData["input.height"] + " - 2px)", | ||
| color: themeData["input.value.fontColor"], | ||
| height: "calc(" + themeData["input.minHeight"] + " - 2px)", | ||
| transitionProperty: "color", | ||
@@ -62,24 +62,24 @@ transitionDuration: "0.3s" | ||
| input: _extends({ | ||
| backgroundColor: props.variant === variants.BOX ? themeData["input.box.backgroundColor"] : "transparent", | ||
| backgroundColor: props.variant === variants.BOX ? themeData["input.box.default.backgroundColor"] : "transparent", | ||
| boxSizing: "border-box", | ||
| border: "none", | ||
| appearance: "none", | ||
| paddingTop: themeData["input.verticalPadding"], | ||
| paddingRight: props.variant === variants.BOX ? themeData["input.boxType.horizontalPadding"] : themeData["input.horizontalPadding"], | ||
| paddingBottom: themeData["input.verticalPadding"], | ||
| paddingLeft: props.variant === variants.BOX ? themeData["input.boxType.horizontalPadding"] : themeData["input.horizontalPadding"], | ||
| paddingTop: themeData["input.paddingVertical"], | ||
| paddingRight: props.variant === variants.BOX ? themeData["input.box.paddingHorizontal"] : themeData["input.line.paddingHorizontal"], | ||
| paddingBottom: themeData["input.paddingVertical"], | ||
| paddingLeft: props.variant === variants.BOX ? themeData["input.box.paddingHorizontal"] : themeData["input.line.paddingHorizontal"], | ||
| outline: "none", | ||
| fontSize: themeData["density.fontSizes.medium"], | ||
| fontFamily: themeData["input.fontFamily"], | ||
| fontWeight: themeData["input.fontWeight"], | ||
| lineHeight: themeData["input.lineHeight"], | ||
| fontSize: themeData["input.value.fontSize"], | ||
| fontFamily: themeData["input.value.fontFamily"], | ||
| fontWeight: themeData["input.value.fontWeight"], | ||
| lineHeight: themeData["input.value.lineHeight"], | ||
| width: "100%", | ||
| "&::placeholder": { | ||
| color: themeData["input.placeholder.fontColor"] | ||
| color: themeData["input.value.placeholderFontColor"] | ||
| }, | ||
| "&::-ms-input-placeholder": { | ||
| color: themeData["input.placeholder.fontColor"] | ||
| color: themeData["input.value.placeholderFontColor"] | ||
| }, | ||
| "::selection": { | ||
| backgroundColor: themeData["input.highlightColor"] | ||
| backgroundColor: themeData["input.value.highlightColor"] | ||
| } | ||
@@ -251,8 +251,8 @@ }, inputStyles(props, themeData)) | ||
| borderWidth: themeData["input.borderWidth"], | ||
| borderBottomColor: themeData["input.borderBottomColor"] | ||
| borderBottomColor: themeData["input.line.default.borderBottomColor"] | ||
| }; | ||
| return variant === variants.BOX ? _extends$2({}, defaults, { | ||
| borderColor: themeData["input.borderColor"], | ||
| borderBottomColor: themeData["input.box.borderBottomColor"] | ||
| borderColor: themeData["input.box.default.borderColor"], | ||
| borderBottomColor: themeData["input.box.default.borderColor"] | ||
| }) : defaults; | ||
@@ -279,3 +279,3 @@ } | ||
| return _extends$2({}, defaults, { | ||
| borderBottomColor: themeData["input.focus.borderBottomColor"] | ||
| borderBottomColor: themeData["input.line.focus.borderBottomColor"] | ||
| }); | ||
@@ -285,3 +285,3 @@ } | ||
| return _extends$2({}, defaults, { | ||
| borderBottomColor: themeData["input.hover.borderBottomColor"] | ||
| borderBottomColor: themeData["input.box.hover.borderBottomColor"] | ||
| }); | ||
@@ -304,3 +304,3 @@ } | ||
| height: 0, | ||
| backgroundColor: themeData["input.halo.color"], | ||
| backgroundColor: themeData["input.hover.haloColor"], | ||
| transitionProperty: "height, color", | ||
@@ -315,4 +315,4 @@ transitionDuration: "0.3s, 0.3s" | ||
| return { | ||
| height: themeData["input.focus.halo.width"], | ||
| backgroundColor: themeData["input.focus.halo.color"], | ||
| height: themeData["input.haloWidth"], | ||
| backgroundColor: themeData["input.focus.haloColor"], | ||
| transitionDuration: "0.1s, 0.1s" | ||
@@ -323,3 +323,3 @@ }; | ||
| return _extends$2({}, defaults, { | ||
| height: themeData["input.hover.halo.width"], | ||
| height: themeData["input.haloWidth"], | ||
| transitionDuration: "0.1s, 0.1s" | ||
@@ -326,0 +326,0 @@ }); |
@@ -0,1 +1,8 @@ | ||
| # [@hig/input-v1.2.1](https://github.com/Autodesk/hig/compare/@hig/input@1.2.0...@hig/input@1.2.1) (2020-05-12) | ||
| ### Bug Fixes | ||
| * stop using deprecated theme-data roles ([98cde66](https://github.com/Autodesk/hig/commit/98cde66)) | ||
| # [@hig/input-v1.2.0](https://github.com/Autodesk/hig/compare/@hig/input@1.1.6...@hig/input@1.2.0) (2019-09-05) | ||
@@ -2,0 +9,0 @@ |
| { | ||
| "name": "@hig/input", | ||
| "version": "1.2.0", | ||
| "version": "1.2.1", | ||
| "description": "HIG Input", | ||
@@ -33,3 +33,3 @@ "author": "Autodesk Inc.", | ||
| "@hig/theme-context": "^3.0.0", | ||
| "@hig/theme-data": "^2.10.1", | ||
| "@hig/theme-data": "^2.16.0", | ||
| "react": "^15.4.1 || ^16.3.2" | ||
@@ -36,0 +36,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.88%
43819
No dependency changes