primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-01 12:42:32 +03:00
Code Issues Projects Releases Wiki Activity

fix raw-loader SCSS imports, rework palette objects

Browse Source
This commit is contained in:
Shawn Allen 2019-06-17 14:20:29 -07:00
parent 873e467a9f
commit e2088366ad
1 changed files with 39 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
docs/color-variables.js
View File

@ -1,10 +1,11 @@
import titleCase from 'title-case'
import primerColors from 'primer-colors'
import colorSystemSCSS from '!!raw-loader?modules!../src/support/variables/color-system.scss'
import colorVariablesSCSS from '!!raw-loader?modules!../src/support/variables/colors.scss'
export const variables = {}
import colorSystemSCSS from '!!raw-loader?module!../src/support/variables/color-system.scss'
import colorVariablesSCSS from '!!raw-loader?module!../src/support/variables/colors.scss'
parseSCSSVariables(colorSystemSCSS, variables)
parseSCSSVariables(colorVariablesSCSS, variables)
@ -13,37 +14,49 @@ parseSCSSVariables(colorVariablesSCSS, variables)
export const gradientHues = ['gray', 'blue', 'green', 'purple', 'yellow', 'orange', 'red', 'pink']
export const colors = {
...primerColors,
pink: Object.keys(variables)
.filter(key => key.startsWith('pink-'))
.sort()
.map(key => variables[key]),
...primerColors
.map(key => variables[key])
}
export const gradientPalettes = gradientHues.map(name => ({
name,
title: titleCase(name),
values: colors[name].map((value, index) => ({
value,
index,
variable: `${name}-${index}00`,
slug: `${name}-${index}`
export const gradientPalettes = gradientHues.map(name => {
const bgClass = `bg-${name}`
const textClass = `text-${name}`
return {
name,
title: titleCase(name),
bg: variables[bgClass] ? {className: bgClass, value: variables[bgClass]} : null,
fg: variables[textClass] ? {className: textClass, value: variables[textClass]} : null,
values: colors[name].map((value, index) => ({
value,
index,
variable: `${name}-${index}00`,
slug: `${name}-${index}`
}))
}
})
export const backgroundPalettes = gradientPalettes
.filter(palette => palette.bg)
.map(({name, values, bg, ...paletteRest}) => ({
name,
...paletteRest,
className: bg.className,
value: bg.value,
values: values.map(value => ({...value, className: `bg-${value.slug}`}))
}))
}))
export const backgroundPalettes = gradientPalettes.map(({name, values, ...paletteRest}) => ({
name,
...paletteRest,
value: variables[`bg-${name}`] || '',
values: values.map(value => ({...value, className: `bg-${value.slug}`}))
}))
export const foregroundPalettes = gradientPalettes.map(({name, values, ...paletteRest}) => ({
name,
...paletteRest,
value: variables[`text-${name}`] || '',
values: values.map(value => ({...value, className: `color-${value.slug}`}))
}))
export const foregroundPalettes = gradientPalettes
.filter(palette => palette.fg)
.map(({name, values, fg, ...paletteRest}) => ({
name,
...paletteRest,
className: fg.className,
value: fg.value,
values: values.map(value => ({...value, className: `color-${value.slug}`}))
}))
export function getBackgroundPalette(name) {
return backgroundPalettes.find(palette => palette.name === name)