@v4fire/client/src/global/g-def/funcs/ds.styl

V4Fire client core library

/*!
 * V4Fire Client Core
 * https://github.com/V4Fire/Client
 *
 * Released under the MIT license
 * https://github.com/V4Fire/Client/blob/master/LICENSE
 */

/**
 * Returns a color from the global kits or from the design system
 *
 * @param {string} $kit
 * @param {number|string} [$id]
 * @param {boolean=} [$reserved]
 * @param {boolean=} [$base]
 */
c($kit, $id = null, $reserved = false, $base = false)
	if getDSValue("colors")
		$color = getDSColor($kit, $id)
		$value = type($color) == "string" ? convert($color) : $color
		return $value

	getGlobalColor($kit, $id || null, $reserved, $base)

/**
 * Returns a shadow style from the design system by the specified name.
 * The shadow can be applied with a filter or box-shadow.
 *
 * @param {string} $name - the shadow name in the project design system
 * @param {number|string} [$id]
 */
dsShadow($name, $id = null)
	$shadow = getDSValue("shadows", path($name, $id))
	$value = type($shadow) == "string" ? convert($shadow) : $shadow
	return $value

/**
 * Returns a gradient style from the design system by the specified name.
 *
 * @param {string} $name - the gradient name in the project design system
 * @param {number|string} [$id]
 */
dsGradient($name, $id = null)
	$gradient = getDSValue("gradients", path($name, $id))
	$value = type($gradient) == "string" ? convert($gradient) : $gradient
	return $value

/**
 * Returns a set of rules by the specified icon name
 *
 * @param {string} $name
 * @param {object|ident=} [$params] - transform parameters object or a background repeating rule
 * @param {object|ident=} [$opts] - background options object or a background alignment rule
 *
 * @see https://github.com/JetBrains/svg-mixer/tree/master/packages/svg-transform-loader#how-to-pass-transform-parameters
 *
 * @example
 * ```stylus
 * i('24/foo')
 * i('24/foo', repeat-x, left)
 * i('24/foo', {fill: '#FFF'})
 * i('24/foo', {stroke: 'black #qwe'}, left)
 * ```
 */
i($name, $params = null, $opts = null)
	$repeat = no-repeat
	$align = center
	$imgPath = join(".", $name svg)
	$color = DS_ICON_COLOR

	if type($opts) == "object"
		$repeat = $opts.repeat || no-repeat
		$align = $opts.align || center

	else if type($opts) == "ident" || type($opts) == "unit"
		$align = $opts

	if type($params) == "object"
		$imgPath = createURL({href: $imgPath, query: $params})
		$color = $params.color || $params.fill || $color

	else if type($params) == "ident"
		$repeat = $params

	//#if runtime has includeThemes
	/**
	 * @see https://dev.to/hasantezcan/how-to-colorize-svg-image-1kc8#2-css-mask
	 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/mask
	 */
	mask img($imgPath, true) $repeat $align
	background-color $color
	//#endif

	//#unless runtime has includeThemes
	background img($imgPath, true) $repeat $align
	//#endunless

	$chunks = split("/", $name)

	if length($chunks) > 1 and type(convert($chunks[0])) == "unit"
		size unit(convert($chunks[0]), "px")

/**
 * Returns text style rules from design system styles by the specified name
 * @param {string} $name - text style name
 */
t($name)
	$name = replaceByRegExp($name, "[ \/]", "-", "g")
	$obj = getDSTextStyles($name)

	if $obj
		interpolate-props($obj)

/**
 * Returns a `border-radius` rule from design system styles by the specified name and position
 *
 * @param {string} $name - border-radius DS name
 * @param {string} [$pos] - %s tokens-styled string for multiple border-radius values
 *
 * @example
 * r(big, '$s 0 $s') -> border-radius 16px 0 16px
 */
r($name, $pos = null)
	$val = getDSValue("rounding", $name)

	if $val
		if $pos
			border-radius convert(replace("%s", s("%s", $val), $pos))

		else
			border-radius type($val) == "string" ? convert($val) : $val

/**
 * Generates necessary rules for the specified component options and factory.
 * The function is used to integrate a design system.
 *
 * @param $p
 * @param $fn
 */
generateRules($p, $fn)
	if !$p.skipDsInheritance
		$fn($p.values)

		//#if runtime has ds/diff
		&_diff_true
			$fn($p.__diffVars__)

		&_diff_false
			$fn($p.values)
		//#endif

		return

	return