@symbo.ls/scratch - npm Package Compare versions

Comparing version 0.3.4 to 0.3.5

package.json

@@ -5,3 +5,3 @@ {
   "author": "Symbols",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "files": [
@@ -8,0 +8,0 @@ "src"

src/methods/set.js

@@ -11,7 +11,11 @@ 'use strict'
   isObjectLike,
-  getColorShade,
+  rgbToHSL,
   hexToRgbArray,
   rgbArrayToHex,
   getDefaultOrFirstKey,
-  getFontFaceEach
+  getFontFaceEach,
+  hslToRgb,
+  getColorShade,
+  pSBC,
+  changeLightness
 } from '../utils'
@@ -66,8 +70,20 @@
       if (!val[tone]) {
-        const toHex = rgbArrayToHex(rgb.split(', '))
-        rgb = hexToRgbArray(getColorShade(toHex, tone)).join(', ')
+        const toHex = rgbArrayToHex(rgb.split(', ').map(v => parseFloat(v)))
+        if (tone.slice(0, 1) === '-' || tone.slice(0, 1) === '+') {
+          rgb = hexToRgbArray(getColorShade(toHex, parseFloat(tone))).join(', ')
+        } else {
+          console.log(rgb)
+          const [r, g, b] = [...rgb.split(', ').map(v => parseFloat(v))]
+          const hsl = rgbToHSL(r, g, b)
+          const [h, s, l] = hsl
+          console.log(h, s, l, tone)
+          const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255)
+          console.log(newRgb)
+          rgb = newRgb
+          console.log(rgb)
+        }
         val[tone] = { rgb, var: `${val.var}-${tone}` }
       } else rgb = val[tone].rgb
     }
-    if (alpha) return `rgba(${val.rgb}, ${alpha})`
+    if (alpha) return `rgba(${rgb}, ${alpha})`
     return `rgb(${rgb})`
@@ -74,0 +90,0 @@ } else return val.value

src/utils/index.js

@@ -102,3 +102,3 @@ 'use strict'
 export const rgbArrayToHex = ([r, g, b]) => {
-  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
+  return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
 }
@@ -123,2 +123,55 @@
 
+// export const rgbToHSL = (r, g, b) => {
+//   console.log(r, g, b)
+//   r /= 255
+//   g /= 255
+//   b /= 255
+//   const l = Math.max(r, g, b)
+//   const s = l - Math.min(r, g, b)
+//   const h = s
+//     ? l === r
+//         ? (g - b) / s
+//         : l === g
+//           ? 2 + (b - r) / s
+//           : 4 + (r - g) / s
+//     : 0
+//   return [
+//     60 * h < 0 ? 60 * h + 360 : 60 * h,
+//     100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),
+//     (100 * (2 * l - s)) / 2
+//   ]
+// }
+
+// export const hslToRgb = (h, s, l) => {
+//   console.log(h, s, l)
+//   const a = s * Math.min(l, 1 - l)
+//   const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
+//   return [f(0), f(8), f(4)].map(v => v * 1000)
+// }
+
+export const changeLightness = (delta, hsl) => {
+  const [hue, saturation, lightness] = hsl
+
+  const newLightness = Math.max(
+    0,
+    Math.min(100, lightness + parseFloat(delta))
+  )
+
+  return [hue, saturation, newLightness]
+}
+
+export const rgbToHSL = (r, g, b) => {
+  console.log(r, g, b)
+  const a = Math.max(r, g, b); const n = a - Math.min(r, g, b); const f = (1 - Math.abs(a + a - n - 1))
+  const h = n && ((a == r) ? (g - b) / n : ((a == g) ? 2 + (b - r) / n : 4 + (r - g) / n))
+  return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2]
+}
+
+export const hslToRgb = (h, s, l,
+  a = s * Math.min(l, 1 - l),
+  f = (n, k = (n + h / 30) % 12) => l - a * Math.max(
+    Math.min(k - 3, 9 - k, 1), -1
+  )
+) => [f(0), f(8), f(4)]
+
 export const getColorShade = (col, amt) => {
@@ -125,0 +178,0 @@ const num = parseInt(col, 16)

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

26781

increased by8.24%

Lines of code

836

increased by8.01%

No dependency changes