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

A collection of design tokens for consumption across projects and products

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

props:

  # EMBL Green Colours
  # -------------------
  - name: vf-color--green
    value: '{!vf-color--green}'
    meta:
      friendlyName: EMBL Green
      sassFunction: color
      sassMap: green
      CSSCustomProperty: --vf-color--green
      comment:
  - name: vf-color--green--darkest
    value: '{!vf-color--green--darkest}'
    meta:
      friendlyName: EMBL Green, Darkest Tint
      sassFunction: color
      sassMap: green--darkest
      CSSCustomProperty: --vf-color--green--darkest
      comment:
  - name: vf-color--green--dark
    value: '{!vf-color--green--dark}'
    meta:
      friendlyName: EMBL Green, Dark Tint
      sassFunction: color
      sassMap: green--dark
      CSSCustomProperty: --vf-color--green--dark
      comment:
  - name: vf-color--green--light
    value: '{!vf-color--green--light}'
    meta:
      friendlyName: EMBL Green, Light Tint
      sassFunction: color
      sassMap: green--light
      CSSCustomProperty: --vf-color--green--light
      comment:
  - name: vf-color--green--lightest
    value: '{!vf-color--green--lightest}'
    meta:
      friendlyName: EMBL Green, Lightest Tint
      sassFunction: color
      sassMap: green--lightest
      CSSCustomProperty: --vf-color--green--lightest
      comment:

  # EMBL Grey Colours
  # -------------------
  - name: vf-color--grey
    value: '{!vf-color--grey}'
    meta:
      friendlyName: EMBL Grey
      sassFunction: color
      sassMap: grey
      CSSCustomProperty: --vf-color--grey
      Deprecated: true
      DeprecatedText: Please use the <a class="vf-card__link" href="../neutral-colors/">vf-neutral--600</a> token.
      comment:
  - name: vf-color--grey--darkest
    value: '{!vf-color--grey--darkest}'
    meta:
      friendlyName: EMBL Grey, Darkest Tint
      sassFunction: color
      sassMap: grey--darkest
      CSSCustomProperty: --vf-color--grey--darkest
      Deprecated: true
      DeprecatedText: Please use the <a class="vf-card__link" href="../neutral-colors/">vf-neutral--800</a> token.
      comment:
  - name: vf-color--grey--dark
    value: '{!vf-color--grey--dark}'
    meta:
      friendlyName: EMBL Grey, Dark Tint
      sassFunction: color
      sassMap: grey--dark
      CSSCustomProperty: --vf-color--grey--dark
      Deprecated: true
      DeprecatedText: Please use the <a class="vf-card__link" href="../neutral-colors/">vf-neutral--700</a> token.
      comment:
  - name: vf-color--grey--light
    value: '{!vf-color--grey--light}'
    meta:
      friendlyName: EMBL Grey, Light Tint
      sassFunction: color
      sassMap: grey--light
      CSSCustomProperty: --vf-color--grey--light
      Deprecated: true
      DeprecatedText: Please use the <a class="vf-card__link" href="../neutral-colors/">vf-neutral--300</a> token.
      comment:
  - name: vf-color--grey--lightest
    value: '{!vf-color--grey--lightest}'
    meta:
      friendlyName: EMBL Grey, Lightest Tint
      sassFunction: color
      sassMap: grey--lightest
      CSSCustomProperty: --vf-color--grey--lightest
      Deprecated: true
      DeprecatedText: Please use the <a class="vf-card__link" href="../neutral-colors/">vf-neutral--200</a> token.
      comment:

  # EMBL Red Colours
  # -------------------

  - name: vf-color--red
    value: '{!vf-color--red}'
    meta:
      friendlyName: EMBL Red
      sassFunction: color
      sassMap: red
      CSSCustomProperty: --vf-color--red
      comment:
  - name: vf-color--red--dark
    value: '{!vf-color--red--dark}'
    meta:
      friendlyName: EMBL Red, Dark Tint
      sassFunction: color
      sassMap: red--dark
      CSSCustomProperty: --vf-color--red--dark
      comment:
  - name: vf-color--red--light
    value: '{!vf-color--red--light}'
    meta:
      friendlyName: EMBL Red, Light Tint
      sassFunction: color
      sassMap: red--light
      CSSCustomProperty: --vf-color--red--light
      comment:

  # EMBL Blue Colours
  # -------------------

  - name: vf-color--blue
    value: '{!vf-color--blue}'
    meta:
      friendlyName: EMBL Blue
      sassFunction: color
      sassMap: blue
      CSSCustomProperty: --vf-color--blue
      comment:
  - name: vf-color--blue--dark
    value: '{!vf-color--blue--dark}'
    meta:
      friendlyName: EMBL Blue, Dark Tint
      sassFunction: color
      sassMap: blue--dark
      CSSCustomProperty: --vf-color--blue--dark
      comment:
  - name: vf-color--blue--light
    value: '{!vf-color--blue--light}'
    meta:
      friendlyName: EMBL Blue, Light Tint
      sassFunction: color
      sassMap: blue--light
      CSSCustomProperty: --vf-color--blue--light
      comment:

  # EMBL Purple Colours
  # -------------------

  - name: vf-color--purple
    value: '{!vf-color--purple}'
    meta:
      friendlyName: EMBL Purple
      sassFunction: color
      sassMap: purple
      CSSCustomProperty: --vf-color--purple
      comment:
  - name: vf-color--purple--dark
    value: '{!vf-color--purple--dark}'
    meta:
      friendlyName: EMBL Purple, Dark Tint
      sassFunction: color
      sassMap: purple--dark
      CSSCustomProperty: --vf-color--purple--dark
      comment:
  - name: vf-color--purple--light
    value: '{!vf-color--purple--light}'
    meta:
      friendlyName: EMBL Purple, Light Tint
      sassFunction: color
      sassMap: purple--light
      CSSCustomProperty: --vf-color--purple--light
      comment:

  # EMBL Orange Colours
  # -------------------

  - name: vf-color--orange
    value: '{!vf-color--orange}'
    meta:
      friendlyName: EMBL Orange
      sassFunction: color
      sassMap: orange
      CSSCustomProperty: --vf-color--orange
      comment:
  - name: vf-color--orange--dark
    value: '{!vf-color--orange--dark}'
    meta:
      friendlyName: EMBL Orange, Dark Tint
      sassFunction: color
      sassMap: orange--dark
      CSSCustomProperty: --vf-color--orange--dark
      comment:
  - name: vf-color--orange--light
    value: '{!vf-color--orange--light}'
    meta:
      friendlyName: EMBL Orange, Light Tint
      sassFunction: color
      sassMap: orange--light
      CSSCustomProperty: --vf-color--orange--light
      comment:

  # EMBL Yellow Colours
  # -------------------

  - name: vf-color--yellow
    value: '{!vf-color--yellow}'
    meta:
      friendlyName: EMBL Yellow
      sassFunction: color
      sassMap: yellow
      CSSCustomProperty: --vf-color--yellow
      comment:
  - name: vf-color--yellow--dark
    value: '{!vf-color--yellow--dark}'
    meta:
      friendlyName: EMBL Yellow, Dark Tint
      sassFunction: color
      sassMap: yellow--dark
      CSSCustomProperty: --vf-color--yellow--dark
      comment:
  - name: vf-color--yellow--light
    value: '{!vf-color--yellow--light}'
    meta:
      friendlyName: EMBL Yellow, Light Tint
      sassFunction: color
      sassMap: yellow--light
      CSSCustomProperty: --vf-color--yellow--light
      comment:

  # EMBL Bright Green Colours
  # -------------------

  - name: vf-color--bright-green
    value: '{!vf-color--bright-green}'
    meta:
      friendlyName: EMBL Bright Green
      sassFunction: color
      sassMap: bright-green
      CSSCustomProperty: --vf-color--bright-green
      comment:
  - name: vf-color--bright-green--dark
    value: '{!vf-color--bright-green--dark}'
    meta:
      friendlyName: EMBL Bright Green, Dark Tint
      sassFunction: color
      sassMap: bright-green--dark
      CSSCustomProperty: --vf-color--bright-green--dark
      comment:
  - name: vf-color--bright-green--light
    value: '{!vf-color--bright-green--light}'
    meta:
      friendlyName: EMBL Bright Green, Light Tint
      sassFunction: color
      sassMap: bright-green--light
      CSSCustomProperty: --vf-color--bright-green--light
      comment:

global:
  type: color
  category: color