@symbo.ls/scratch 0.3.4 → 0.3.7

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "Symbols",
-  "version": "0.3.4",
+  "version": "0.3.7",
   "files": [
     "src"
   ],

package/src/methods/set.js

@@ -8,11 +8,15 @@ import {
   isObject,
   isString,
   isObjectLike,
-  getColorShade,
+  rgbToHSL,
   hexToRgbArray,
   rgbArrayToHex,
   getDefaultOrFirstKey,
-  getFontFaceEach
+  getFontFaceEach,
+  hslToRgb,
+  getColorShade,
+  pSBC,
+  changeLightness
 } from '../utils'
 
 const ENV = process.env.NODE_ENV
@@ -62,12 +66,20 @@ export const getColor = value => {
   if (rgb) {
     if (tone) {
       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 {
+          const [r, g, b] = [...rgb.split(', ').map(v => parseFloat(v))]
+          const hsl = rgbToHSL(r, g, b)
+          const [h, s, l] = hsl
+          const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255)
+          rgb = newRgb
+        }
         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})`
   } else return val.value
 }
@@ -202,9 +214,7 @@ const setFontFamily = (val, key) => {
   return { var: CSSvar, value: str, arr: value, type }
 }
 
-const setSameValue = (val, key) => {
-  return val
-}
+const setSameValue = (val, key) => val
 
 export const SETTERS = {
   color: setColor,

package/src/utils/index.js

@@ -99,7 +99,7 @@ export const rgbToHex = (r, g, b) => {
 }
 
 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)
 }
 
 export const hexToRgba = (hex, alpha = 1) => {
@@ -119,6 +119,58 @@ export const mixTwoRgb = (colorA, colorB, range = 0.5) => {
   return `rgb(${arr})`
 }
 
+// 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) => {
+  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) => {
   const num = parseInt(col, 16)
 
@@ -275,6 +327,7 @@ export const generateSequence = ({ type, base, ratio, range, subSequence, ...sta
 export const fallBack = ({ type, prop, val = 'A', prefix = '--font-size-' }) => {
   if (typeof val !== 'string') console.warn(prop, val, 'is not a string')
 
+  if (val === '-' || val === '') return ({ })
   if (val === 'auto') return ({ [prop]: val })
 
   // const startsWithLetterRegex = /^[a-zA-Z]/i