Border

Border tokens define one single border, such as 1px solid #000000 .

Example Token Payload

This is what the border payload looks like:


                                        
                                        
                                        {
                                          "id": string
                                          "name": string
                                          "description": string
                                          "tokenType": "Border"
                                          "origin": ItemOrigin | null
                                          "value": {
                                            "color": {
                                              "hex": string
                                              "r": int (0-255),
                                              "g": int (0-255),
                                              "b": int (0-255),
                                              "a": int (0-255),
                                              "referencedToken": Color | null
                                            },
                                            "width": {
                                              "unit": "px",
                                              "measure": double
                                              "referencedToken": Measure | null
                                            },
                                            "position": "Inside" | "Center" | "Outside"
                                            "referencedToken": Border | null
                                          }
                                        }
                                        
                                        

Associated functions

You can use the following functions to retrieve border tokens from your design system:

  • @ds.allTokens
  • @ds.tokensByType (with "Border") attribute
  • @ds.tokensByGroupId