@symbo.ls/scratch 0.3.2 → 0.3.5

package/package.json

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

package/src/methods/set.js

@@ -8,13 +8,19 @@ import {
   isObject,
   isString,
   isObjectLike,
-  getColorShade,
+  rgbToHSL,
   hexToRgbArray,
   rgbArrayToHex,
   getDefaultOrFirstKey,
-  getFontFaceEach
+  getFontFaceEach,
+  hslToRgb,
+  getColorShade,
+  pSBC,
+  changeLightness
 } from '../utils'
 
+const ENV = process.env.NODE_ENV
+
 const setColor = (val, key) => {
   const [r, g, b, a = 1] = colorStringToRgbaArray(val.value || val)
   const alpha = parseFloat(a.toFixed(2))
@@ -39,14 +45,17 @@ const setGradient = (val, key) => {
 }
 
 export const getColor = value => {
-  if (!isString(value)) return console.warn(value, '- type for color is not valid')
+  if (!isString(value)) {
+    if (ENV === 'test' || ENV === 'development') console.warn(value, '- type for color is not valid')
+    return
+  }
 
   const [name, alpha, tone] = isArray(value) ? value : value.split(' ')
   const { COLOR, GRADIENT } = CONFIG
   const val = COLOR[name] || GRADIENT[name]
 
   if (!val) {
-    console.warn('Can\'t find color', name)
+    if (ENV === 'test' || ENV === 'development') console.warn('Can\'t find color', name)
     return value
   }
 
@@ -57,12 +66,24 @@ 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 {
+          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})`
   } else return val.value
 }
@@ -97,7 +118,8 @@ export const getTheme = value => {
     if (state && state[subThemeName]) return getThemeValue(state[subThemeName])
   } else if (isObject(value)) return setThemeValue(value)
   else if (isString(value) && THEME[value]) return getThemeValue(THEME[value])
-  console.warn('Can\'t find theme', value)
+
+  if (ENV === 'test' || ENV === 'development') console.warn('Can\'t find theme', value)
 }
 
 const setPrefersScheme = (theme, key, variant, themeValue) => {

package/src/reset.js

@@ -15,6 +15,8 @@ export const applyReset = (reset = {}) => deepMerge(merge(RESET, reset), {
     left: '0',
     margin: '0',
     WebkitFontSmoothing: 'antialiased',
+    transform: 'translate3d(0, 0, 1px)',
+    scrollBehavior: 'smooth',
 
     fontFamily: CONFIG.DOCUMENT.fontFamily,
 

package/src/utils/index.js

@@ -2,6 +2,8 @@
 
 import { UNIT } from '../config'
 
+const ENV = process.env.NODE_ENV
+
 export const isString = arg => typeof arg === 'string'
 
 export const isArray = arg => Array.isArray(arg)
@@ -97,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) => {
@@ -117,6 +119,59 @@ 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) => {
+  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) => {
   const num = parseInt(col, 16)
 
@@ -153,7 +208,10 @@ export const mixTwoRgba = (colorA, colorB, range = 0.5) => {
 
 export const opacify = (color, opacity) => {
   const arr = colorStringToRgbaArray(color)
-  if (!arr) return console.warn(color + 'color is not rgba')
+  if (!arr) {
+    if (ENV === 'test' || ENV === 'development') console.warn(color + 'color is not rgba')
+    return
+  }
   arr[3] = opacity
   return `rgba(${arr})`
 }