@visual-framework/vf-design-tokens/src/maps/vf-color__buttons.yml

A collection of design tokens for consumption across projects and products

# --------------
# Button Colours
# --------------

imports:
  - "../theme.palette.alias.yml"

props:

  # Primary Button
  # --------------
  - name: vf-color__button__text--primary
    value: '{!vf-color__button__text--primary}'
    meta:
      friendlyName: Primary Button Text Colour
      sassFunction: button-color
      sassMap: text--primary
      sassVariable: vf-color__button__text--primary
      CSSCustomProperty: --vf-color__button__text--primary
      comment:
  - name: vf-color__button__border--primary
    value: '{!vf-color__button__border--primary}'
    meta:
      friendlyName: Primary Button Border Colour
      sassFunction: button-color
      sassMap: border--primary
      sassVariable: vf-color__button__border--primary
      CSSCustomProperty: --vf-color__button__border--primary
      comment:
  - name: vf-color__button__background--primary
    value: '{!vf-color__button__background--primary}'
    meta:
      friendlyName: Primary Button Background Colour
      sassFunction: button-color
      sassMap: background--primary
      sassVariable: vf-color__button__background--primary
      CSSCustomProperty: --vf-color__button__background--primary
      comment:
  - name: vf-color__button__shadow--primary
    value: '{!vf-color__button__shadow--primary}'
    meta:
      friendlyName: Primary Button Shadow Colour
      sassFunction: button-color
      sassMap: shadow--primary
      sassVariable: vf-color__button__shadow--primary
      CSSCustomProperty: --vf-color__button__shadow--primary
      comment:

  # Secondary Button
  # ----------------
  - name: vf-color__button__text--secondary
    value: '{!vf-color__button__text--secondary}'
    meta:
      friendlyName: Secondary Button Text Colour
      sassFunction: button-color
      sassMap: text--secondary
      sassVariable: vf-color__button__text--secondary
      CSSCustomProperty: --vf-color__button__text--secondary
      comment:
  - name: vf-color__button__border--secondary
    value: '{!vf-color__button__border--secondary}'
    meta:
      friendlyName: Secondary Button Border Colour
      sassFunction: button-color
      sassMap: border--secondary
      sassVariable: vf-color__button__border--secondary
      CSSCustomProperty: --vf-color__button__border--secondary
      comment:
  - name: vf-color__button__background--secondary
    value: '{!vf-color__button__background--secondary}'
    meta:
      friendlyName: Secondary Button Background Colour
      sassFunction: button-color
      sassMap: background--secondary
      sassVariable: vf-color__button__background--secondary
      CSSCustomProperty: --vf-color__button__background--secondary
      comment:
  - name: vf-color__button__shadow--secondary
    value: '{!vf-color__button__shadow--secondary}'
    meta:
      friendlyName: Secondary Button Shadow Colour
      sassFunction: button-color
      sassMap: shadow--secondary
      sassVariable: vf-color__button__shadow--secondary
      CSSCustomProperty: --vf-color__button__shadow--secondary
      comment:

  # Tertiary Button
  # ---------------
  - name: vf-color__button__text--tertiary
    value: '{!vf-color__button__text--tertiary}'
    meta:
      friendlyName: Tertiary Button Text Colour
      sassFunction: button-color
      sassMap: text--tertiary
      sassVariable: vf-color__button__text--tertiary
      CSSCustomProperty: --vf-color__button__text--tertiary
      comment:
  - name: vf-color__button__border--tertiary
    value: '{!vf-color__button__border--tertiary}'
    meta:
      friendlyName: Tertiary Button Border Colour
      sassFunction: button-color
      sassMap: border--tertiary
      sassVariable: vf-color__button__border--tertiary
      CSSCustomProperty: --vf-color__button__border--tertiary
      comment:
  - name: vf-color__button__background--tertiary
    value: '{!vf-color__button__background--tertiary}'
    meta:
      friendlyName: Tertiary Button Background Colour
      sassFunction: button-color
      sassMap: background--tertiary
      sassVariable: vf-color__button__background--tertiary
      CSSCustomProperty: --vf-color__button__background--tertiary
      comment:
  - name: vf-color__button__shadow--tertiary
    value: '{!vf-color__button__shadow--tertiary}'
    meta:
      friendlyName: Tertiary Button Shadow Colour
      sassFunction: button-color
      sassMap: shadow--tertiary
      sassVariable: vf-color__button__shadow--tertiary
      CSSCustomProperty: --vf-color__button__shadow--tertiary
      comment:

global:
  type: color
  category: color