@amsterdam/design-system-tokens/src/components/ams/ordered-list.tokens.json

All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.

{
  "ams": {
    "ordered-list": {
      "color": {
        "$value": "{ams.color.text.default}",
        "$extensions": {
          "nl.amsterdam.type": "color"
        }
      },
      "font-family": {
        "$value": "{ams.typography.font-family}",
        "$extensions": {
          "nl.amsterdam.type": "fontFamily"
        }
      },
      "font-size": {
        "$value": "{ams.typography.body-text.font-size}",
        "$extensions": {
          "nl.amsterdam.type": "fontSize"
        }
      },
      "font-weight": {
        "$value": "{ams.typography.body-text.font-weight}",
        "$extensions": {
          "nl.amsterdam.type": "fontWeight"
        }
      },
      "gap": {
        "$value": "{ams.space.s}",
        "$extensions": {
          "nl.amsterdam.subtype": "space",
          "nl.amsterdam.type": "dimension"
        }
      },
      "line-height": {
        "$value": "{ams.typography.body-text.line-height}",
        "$extensions": {
          "nl.amsterdam.subtype": "lineHeight",
          "nl.amsterdam.type": "number"
        }
      },
      "list-style-type": {
        "$value": "decimal",
        "$extensions": {
          "nl.amsterdam.type": "listStyleType"
        }
      },
      "small": {
        "font-size": {
          "$value": "{ams.typography.body-text.small.font-size}",
          "$extensions": {
            "nl.amsterdam.type": "fontSize"
          }
        },
        "line-height": {
          "$value": "{ams.typography.body-text.small.line-height}",
          "$extensions": {
            "nl.amsterdam.subtype": "lineHeight",
            "nl.amsterdam.type": "number"
          }
        }
      },
      "inverse": {
        "color": {
          "$value": "{ams.color.text.inverse}",
          "$extensions": {
            "nl.amsterdam.type": "color"
          }
        }
      },
      "item": {
        "margin-inline-start": {
          "$value": {
            "value": 2.25,
            "unit": "rem"
          },
          "$extensions": {
            "nl.amsterdam.hint": "Divide your total indentation width over margin and padding to position the marker.",
            "nl.amsterdam.subtype": "space"
          }
        },
        "padding-inline-start": {
          "$value": {
            "value": 0.25,
            "unit": "rem"
          },
          "$extensions": {
            "nl.amsterdam.hint": "The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.",
            "nl.amsterdam.subtype": "space"
          }
        },
        "$type": "dimension"
      },
      "ordered-list": {
        "gap": {
          "$value": "{ams.space.s}",
          "$extensions": {
            "nl.amsterdam.subtype": "space",
            "nl.amsterdam.type": "dimension"
          }
        },
        "list-style-type": {
          "$value": "lower-alpha",
          "$extensions": {
            "nl.amsterdam.type": "listStyleType"
          }
        },
        "padding-block-end": {
          "$value": "{ams.space.s}",
          "$extensions": {
            "nl.amsterdam.subtype": "space",
            "nl.amsterdam.type": "dimension"
          }
        },
        "padding-block-start": {
          "$value": "{ams.space.s}",
          "$extensions": {
            "nl.amsterdam.subtype": "space",
            "nl.amsterdam.type": "dimension"
          }
        },
        "item": {
          "margin-inline-start": {
            "$value": {
              "value": 1.5,
              "unit": "rem"
            },
            "$extensions": {
              "nl.amsterdam.hint": "Indent less than the parent to start-align the child’s marker with the parent text.",
              "nl.amsterdam.subtype": "space"
            }
          },
          "padding-inline-start": {
            "$value": {
              "value": 0.25,
              "unit": "rem"
            },
            "$extensions": {
              "nl.amsterdam.hint": "The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.",
              "nl.amsterdam.subtype": "space"
            }
          },
          "$type": "dimension"
        }
      }
    }
  }
}