styled-tools - npm Package Compare versions

Comparing version 1.4.3 to 1.5.0

CHANGELOG.md

@@ -5,2 +5,12 @@ # Change Log
 
+<a name="1.5.0"></a>
+# [1.5.0](https://github.com/diegohaz/styled-tools/compare/v1.4.3...v1.5.0) (2018-09-02)
+
+
+### Features
+
+* **palette:** Use `props.tone` if it wasn't passed in as argument ([ce36900](https://github.com/diegohaz/styled-tools/commit/ce36900))
+
+
+
 <a name="1.4.3"></a>
@@ -7,0 +17,0 @@ ## [1.4.3](https://github.com/diegohaz/styled-tools/compare/v1.4.2...v1.4.3) (2018-08-31)

dist/cjs/palette.js

@@ -18,3 +18,3 @@ "use strict";
 /**
- * Returns `props.theme.palette[key][index]` or `defaultValue`.
+ * Returns `props.theme.palette[key || props.palette][tone || props.tone || 0]` or `defaultValue`.
  * @example
@@ -34,2 +34,3 @@ * import styled, { ThemeProvider } from "styled-components";
  *   color: ${palette("primary", 1)};         // props.theme.palette.primary[1]
+ *   color: ${palette("primary")};            // props.theme.palette.primary[props.tone || 0]
  *   color: ${palette("primary", -1)};        // props.theme.palette.primary[3]
@@ -47,7 +48,7 @@ *   color: ${palette("primary", 10)};        // props.theme.palette.primary[3]
 
-var palette = function palette(keyOrIndex, indexOrDefaultValue, defaultValue) {
+var palette = function palette(keyOrTone, toneOrDefaultValue, defaultValue) {
   return function (props) {
-    var key = typeof keyOrIndex === "string" ? keyOrIndex : props.palette;
-    var index = typeof keyOrIndex === "number" ? keyOrIndex : typeof indexOrDefaultValue === "number" ? indexOrDefaultValue : 0;
-    var finalDefaultValue = indexOrDefaultValue !== index ? indexOrDefaultValue : defaultValue;
+    var key = typeof keyOrTone === "string" ? keyOrTone : props.palette;
+    var tone = typeof keyOrTone === "number" ? keyOrTone : typeof toneOrDefaultValue === "number" ? toneOrDefaultValue : props.tone || 0;
+    var finalDefaultValue = toneOrDefaultValue !== tone ? toneOrDefaultValue : defaultValue;
 
@@ -60,7 +61,7 @@ if (!props.theme.palette || !props.theme.palette[key]) {
 
-    if (index < 0) {
-      return tones[clamp(tones.length + index, 0, tones.length - 1)];
+    if (tone < 0) {
+      return tones[clamp(tones.length + tone, 0, tones.length - 1)];
     }
 
-    return tones[clamp(index, 0, tones.length - 1)];
+    return tones[clamp(tone, 0, tones.length - 1)];
   };
@@ -67,0 +68,0 @@ };

dist/es/palette.js

@@ -11,3 +11,3 @@ var toArray = function toArray(arg) {
 /**
- * Returns `props.theme.palette[key][index]` or `defaultValue`.
+ * Returns `props.theme.palette[key || props.palette][tone || props.tone || 0]` or `defaultValue`.
  * @example
@@ -27,2 +27,3 @@ * import styled, { ThemeProvider } from "styled-components";
  *   color: ${palette("primary", 1)};         // props.theme.palette.primary[1]
+ *   color: ${palette("primary")};            // props.theme.palette.primary[props.tone || 0]
  *   color: ${palette("primary", -1)};        // props.theme.palette.primary[3]
@@ -40,7 +41,7 @@ *   color: ${palette("primary", 10)};        // props.theme.palette.primary[3]
 
-var palette = function palette(keyOrIndex, indexOrDefaultValue, defaultValue) {
+var palette = function palette(keyOrTone, toneOrDefaultValue, defaultValue) {
   return function (props) {
-    var key = typeof keyOrIndex === "string" ? keyOrIndex : props.palette;
-    var index = typeof keyOrIndex === "number" ? keyOrIndex : typeof indexOrDefaultValue === "number" ? indexOrDefaultValue : 0;
-    var finalDefaultValue = indexOrDefaultValue !== index ? indexOrDefaultValue : defaultValue;
+    var key = typeof keyOrTone === "string" ? keyOrTone : props.palette;
+    var tone = typeof keyOrTone === "number" ? keyOrTone : typeof toneOrDefaultValue === "number" ? toneOrDefaultValue : props.tone || 0;
+    var finalDefaultValue = toneOrDefaultValue !== tone ? toneOrDefaultValue : defaultValue;
 
@@ -53,7 +54,7 @@ if (!props.theme.palette || !props.theme.palette[key]) {
 
-    if (index < 0) {
-      return tones[clamp(tones.length + index, 0, tones.length - 1)];
+    if (tone < 0) {
+      return tones[clamp(tones.length + tone, 0, tones.length - 1)];
     }
 
-    return tones[clamp(index, 0, tones.length - 1)];
+    return tones[clamp(tone, 0, tones.length - 1)];
   };
@@ -60,0 +61,0 @@ };

package.json

 {
   "name": "styled-tools",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "Utilities for styled-components",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -150,8 +150,8 @@ # styled-tools 💅
 
-Returns `props.theme.palette[key][index]` or `defaultValue`.
+Returns `props.theme.palette[key || props.palette][tone || props.tone || 0]` or `defaultValue`.
 
 #### Parameters
 
--   `keyOrIndex` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number))** 
--   `indexOrDefaultValue` **any** 
+-   `keyOrTone` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number))** 
+-   `toneOrDefaultValue` **any** 
 -   `defaultValue` **any** 
@@ -175,2 +175,3 @@
   color: ${palette("primary", 1)};         // props.theme.palette.primary[1]
+  color: ${palette("primary")};            // props.theme.palette.primary[props.tone || 0]
   color: ${palette("primary", -1)};        // props.theme.palette.primary[3]
@@ -177,0 +178,0 @@ color: ${palette("primary", 10)};        // props.theme.palette.primary[3]

types/index.d.ts

@@ -20,12 +20,16 @@ type Needle<Props> = string | ((props?: Props) => any);
 interface Palette {
-  (index?: number): <Props, Theme extends ThemeWithPalette>(
-    props: Props & { theme: Theme; palette?: keyof Theme["palette"] }
+  (tone?: number): <Props, Theme extends ThemeWithPalette>(
+    props: Props & {
+      theme: Theme;
+      palette?: keyof Theme["palette"];
+      tone?: number;
+    }
   ) => any;
 
-  (index: number, defaultValue: any): <Props, Theme extends ThemeWithPalette>(
+  (tone: number, defaultValue: any): <Props, Theme extends ThemeWithPalette>(
     props: Props & { theme: Partial<Theme>; palette?: keyof Theme["palette"] }
   ) => any;
 
-  (key: string, index?: number): <Props, Theme extends ThemeWithPalette>(
-    props: Props & { theme: Theme }
+  (key: string, tone?: number): <Props, Theme extends ThemeWithPalette>(
+    props: Props & { theme: Theme; tone?: number }
   ) => any;
@@ -37,6 +41,6 @@
   >(
-    props: Props & { theme: Theme }
+    props: Props & { theme: Theme; tone?: number }
   ) => any;
 
-  (key: string, index: number, defaultValue?: Exclude<any, number>): <
+  (key: string, tone: number, defaultValue?: Exclude<any, number>): <
     Props,
@@ -43,0 +47,0 @@ Theme extends ThemeWithPalette

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

42393

increased by1.7%

Lines of code

722

increased by0.84%

Number of lines in readme file

311

increased by0.32%

No dependency changes