Rules for Text Style Mapping

definitions.md

Definitions

{
  "text-styles": [
    {
      "name": "smallscreen-small-headline-hardtone",
      "typeface": "@cheltenham",
      "weight": "700",
      "font-size": "22",
      "line-height": "27",
      "letterspacing": "0.1",
      "color": "@gray-10",
      "align": "left"
    },
    {
      "name": "smallscreen-small-headline-hardtone",
      "typeface": "@cheltenham",
      "weight": "500",
      "font-size": "22",
      "line-height": "27",
      "letterspacing": "0.1",
      "color": "@gray-10",
      "align": "left"
    },
    …
  ]
}

mappings.md

Mapping

{
  "text-styles-mapping": [
    {
      "card-type": "standard",
      "screen-size": "small",
      "rendition": "whole",
      "tone": "hard",
      "status": "regular",
      "element": "headline",
      "text-style": "smallscreen-small-headline-hardtone"
    },
    {
      "card-type": "standard",
      "screen-size": "small",
      "rendition": "whole",
      "tone": "soft",
      "status": "regular",
      "element": "headline",
      "text-style": "smallscreen-small-headline-hardtone"
    },
    …
  ]
}

I'm thinking of something more cascading. should be less verbose & less duplication, but may be more complicated too.
Here's the idea:

"text-styles" : [
{

  "card-type": "standard",
  "text-style": {
      "name": "smallscreen-small-headline-hardtone",
      "typeface": "@cheltenham",
      "weight": "700",
      "font-size": "22",
      "line-height": "27",
      "letterspacing": "0.1",
      "color": "@gray-10",
      "align": "left"
  },
  "screen-sizes": [
    {
        "screen-size": "small",
        "text-style": {
          "font-size": "21"
        }
    },
    {
        "screen-size": "large",
        "text-style": {
          "font-size": "30"
        }
    }
  ]
}

{
  "card-type": "bullet",
  "text-style": {
    .....
  }
}