Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@symbo.ls/scratch
Advanced tools
@symbo.ls/scratch - npm Package Compare versions
Comparing version 0.3.22 to 0.3.23
@@ -5,3 +5,3 @@ { | ||
| "author": "symbo.ls", | ||
| "version": "0.3.22", | ||
| "version": "0.3.23", | ||
| "files": [ | ||
@@ -8,0 +8,0 @@ "src" |
| 'use strict' | ||
| import * as CONFIG from './config' | ||
| import { getTheme } from './set' | ||
| import { getTheme } from './system' | ||
| import { deepMerge, merge } from './utils' | ||
@@ -44,3 +44,3 @@ | ||
| select: { | ||
| 'select, input': { | ||
| fontFamily: CONFIG.DOCUMENT.fontFamily | ||
@@ -47,0 +47,0 @@ } |
228
src/set.js
@@ -6,16 +6,6 @@ 'use strict' | ||
| import { applyReset } from './reset' | ||
| import { setColor, setGradient, setFont, setFontFamily, setTheme } from './system' | ||
| import { | ||
| isArray, | ||
| colorStringToRgbaArray, | ||
| isObject, | ||
| isString, | ||
| isObjectLike, | ||
| rgbToHSL, | ||
| hexToRgbArray, | ||
| rgbArrayToHex, | ||
| getDefaultOrFirstKey, | ||
| getFontFaceEach, | ||
| hslToRgb, | ||
| getColorShade, | ||
| setVariables | ||
| setVariables, | ||
| isFunction | ||
| } from './utils' | ||
@@ -25,211 +15,5 @@ | ||
| export const getColor = value => { | ||
| if (!isString(value)) { | ||
| if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) 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) { | ||
| if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find color', name) | ||
| return value | ||
| } | ||
| // TODO: support variables | ||
| // if (alpha) return `rgba(var(${val[shade || ''].var}), ${modifier})` | ||
| let rgb = val.rgb | ||
| if (rgb) { | ||
| if (tone) { | ||
| if (!val[tone]) { | ||
| 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 => parseInt(v))] | ||
| const hsl = rgbToHSL(r, g, b) | ||
| const [h, s, l] = hsl // eslint-disable-line | ||
| 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(${rgb}, ${alpha})` | ||
| return `rgb(${rgb})` | ||
| } else return val.value | ||
| } | ||
| const setColor = (val, key) => { | ||
| if (val.slice(0, 2) === '--') val = getColor(val.slice(2)) | ||
| const CSSVar = `--color-${key}` | ||
| const [r, g, b, a = 1] = colorStringToRgbaArray(val.value || val) | ||
| const alpha = parseFloat(a.toFixed(2)) | ||
| const rgb = `${r}, ${g}, ${b}` | ||
| const value = `rgba(${rgb}, ${alpha})` | ||
| return { | ||
| var: CSSVar, | ||
| rgb, | ||
| alpha, | ||
| value | ||
| } | ||
| } | ||
| const setGradient = (val, key) => { | ||
| const CSSVar = `--gradient-${key}` | ||
| return { | ||
| var: CSSVar, | ||
| value: val.value || val | ||
| } | ||
| } | ||
| const setThemeValue = theme => { | ||
| const value = {} | ||
| const { state, variants, helpers, ...rest } = theme | ||
| const keys = Object.keys(rest) | ||
| keys.map(key => { | ||
| const conditions = ['color', 'Color', 'background', 'border'] | ||
| const isColor = conditions.some(k => key.includes(k)) | ||
| return (value[key] = isColor ? getColor(theme[key]) : theme[key]) | ||
| }) | ||
| return value | ||
| } | ||
| const getThemeValue = theme => { | ||
| if (theme.value) return theme.value | ||
| theme.value = setThemeValue(theme) | ||
| return theme.value | ||
| } | ||
| export const getTheme = value => { | ||
| const { THEME } = CONFIG | ||
| if (isString(value)) { | ||
| const [theme, subtheme] = value.split(' ') | ||
| const isOurTheme = THEME[theme] | ||
| if (isOurTheme) { | ||
| if (!subtheme) return getThemeValue(isOurTheme) | ||
| value = [theme, subtheme] | ||
| } | ||
| } | ||
| if (isObjectLike(value) && value[1]) { | ||
| const themeName = value[0] | ||
| const subThemeName = value[1] | ||
| const { helpers, variants, state } = THEME[themeName] | ||
| if (variants && variants[subThemeName]) return getThemeValue(variants[subThemeName]) | ||
| if (helpers && helpers[subThemeName]) return getThemeValue(helpers[subThemeName]) | ||
| if (state && state[subThemeName]) return getThemeValue(state[subThemeName]) | ||
| } else if (isObject(value)) return setThemeValue(value) | ||
| if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find theme', value) | ||
| } | ||
| const setInverseTheme = (theme, variant, value) => { | ||
| if (isObject(variant)) { | ||
| theme.variants.inverse.value = setThemeValue(variant) | ||
| } else if (variant === true) { | ||
| const { color, background } = value | ||
| theme.variants.inverse = { | ||
| value: { | ||
| color: background, | ||
| background: color | ||
| } | ||
| } | ||
| } | ||
| } | ||
| const setPseudo = (theme, key, variant, themeValue) => { | ||
| const result = getTheme(variant) | ||
| themeValue[`&:${key}`] = result | ||
| if (isObject(variant) && !variant.value) variant.value = result | ||
| } | ||
| const goThroughInteractiveStates = (theme, value) => { | ||
| const { state } = theme | ||
| if (!state) return | ||
| const keys = Object.keys(state) | ||
| keys.map(key => { | ||
| const variant = state[key] | ||
| setPseudo(theme, key, variant, value) | ||
| return theme | ||
| }) | ||
| return theme | ||
| } | ||
| const setPrefersScheme = (theme, key, variant, themeValue) => { | ||
| const result = getTheme(variant) | ||
| // console.log(variant) | ||
| themeValue[`@media (prefers-color-scheme: ${key})`] = result | ||
| if (isObject(variant) && !variant.value) variant.value = result | ||
| } | ||
| const goThroughVariants = (theme, value) => { | ||
| const { variants } = theme | ||
| if (!variants) return | ||
| const keys = Object.keys(variants) | ||
| keys.map(key => { | ||
| const variant = variants[key] | ||
| // console.log('=========') | ||
| // console.log(theme, key, variant, value) | ||
| if (key === 'dark' || key === 'light') setPrefersScheme(theme, key, variant, value) | ||
| if (key === 'inverse') setInverseTheme(theme, variant, value) | ||
| return theme | ||
| }) | ||
| return theme | ||
| } | ||
| const goThroughHelpers = (theme, value) => { | ||
| const { helpers } = theme | ||
| if (!helpers) return | ||
| const keys = Object.keys(helpers) | ||
| keys.map(key => { | ||
| const helper = helpers[key] | ||
| if (isString(helper)) helpers[key] = CONFIG.THEME[helper] | ||
| else getThemeValue(helpers[key]) | ||
| return theme | ||
| }) | ||
| return theme | ||
| } | ||
| const setTheme = (val, key) => { | ||
| const { state, variants, helpers } = val | ||
| const value = setThemeValue(val, key) | ||
| const CSSvar = `--theme-${key}` | ||
| goThroughInteractiveStates(val, value) | ||
| goThroughVariants(val, value) | ||
| goThroughHelpers(val, value) | ||
| return { var: CSSvar, value, state, variants, helpers } | ||
| } | ||
| const setFont = (val, key) => { | ||
| const CSSvar = `--font-${key}` | ||
| const fontFace = getFontFaceEach(key, val) | ||
| return { var: CSSvar, value: val, fontFace } | ||
| } | ||
| export const getFontFamily = (LIBRARY, key) => { | ||
| return getDefaultOrFirstKey(LIBRARY, key) | ||
| } | ||
| const setFontFamily = (val, key) => { | ||
| const { FONT_FAMILY, FONT_FAMILY_TYPES } = CONFIG | ||
| const { value, type } = val | ||
| if (val.isDefault) FONT_FAMILY.default = key | ||
| const CSSvar = `--font-family-${key}` | ||
| const str = `${value.join(', ')}, ${FONT_FAMILY_TYPES[type]}` | ||
| return { var: CSSvar, value: str, arr: value, type } | ||
| } | ||
| const setCases = (val, key) => { | ||
| return val() | ||
| if (isFunction(val)) return val() | ||
| return val | ||
| } | ||
@@ -308,1 +92,3 @@ | ||
| } | ||
| export * from './system' |
@@ -47,1 +47,3 @@ 'use strict' | ||
| } | ||
| export const isFunction = arg => typeof arg === 'function' |
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 by3.12%
29806
- Number of package files
- increased by14.29%
32
- Lines of code
- increased by2.96%
905
Worsened metrics
- Number of low supply chain risk alerts
- increased by100%
4
No dependency changes