outsystems-design-tokens/tokens/primitives.json

Store the Design Tokens used on the Ionic Framework and Widgets Library

{
  "border": {
    "border-style": {
      "none": {
        "$type": "text",
        "$value": "none"
      },
      "solid": {
        "$type": "text",
        "$value": "solid"
      },
      "dashed": {
        "$type": "text",
        "$value": "dashed"
      },
      "dotted": {
        "$type": "text",
        "$value": "dotted"
      }
    },
    "border-size": {
      "0": {
        "$type": "borderWidth",
        "$value": "{scale.0}"
      },
      "025": {
        "$type": "borderWidth",
        "$value": "{scale.025}"
      },
      "050": {
        "$type": "borderWidth",
        "$value": "{scale.050}"
      },
      "075": {
        "$type": "borderWidth",
        "$value": "{scale.075}"
      }
    },
    "border-radius": {
      "0": {
        "$type": "borderRadius",
        "$value": "{scale.0}"
      },
      "100": {
        "$type": "borderRadius",
        "$value": "{scale.100}"
      },
      "200": {
        "$type": "borderRadius",
        "$value": "{scale.200}"
      },
      "300": {
        "$type": "borderRadius",
        "$value": "{scale.300}"
      },
      "400": {
        "$type": "borderRadius",
        "$value": "{scale.400}"
      },
      "500": {
        "$type": "borderRadius",
        "$value": "{scale.500}"
      },
      "800": {
        "$type": "borderRadius",
        "$value": "{scale.800}"
      },
      "1000": {
        "$type": "borderRadius",
        "$value": "{scale.1000}"
      },
      "full": {
        "$type": "borderRadius",
        "$value": "999px"
      },
      "025": {
        "$type": "borderRadius",
        "$value": "{scale.050}"
      }
    }
  },
  "scale": {
    "0": {
      "$type": "dimension",
      "$value": "0px"
    },
    "100": {
      "$type": "dimension",
      "$value": "4px"
    },
    "150": {
      "$type": "dimension",
      "$value": "6px"
    },
    "200": {
      "$type": "dimension",
      "$value": "8px"
    },
    "250": {
      "$type": "dimension",
      "$value": "10px"
    },
    "300": {
      "$type": "dimension",
      "$value": "12px"
    },
    "400": {
      "$type": "dimension",
      "$value": "16px"
    },
    "500": {
      "$type": "dimension",
      "$value": "20px"
    },
    "600": {
      "$type": "dimension",
      "$value": "24px"
    },
    "700": {
      "$type": "dimension",
      "$value": "28px"
    },
    "800": {
      "$type": "dimension",
      "$value": "32px"
    },
    "900": {
      "$type": "dimension",
      "$value": "36px"
    },
    "1000": {
      "$type": "dimension",
      "$value": "40px"
    },
    "1100": {
      "$type": "dimension",
      "$value": "44px"
    },
    "1200": {
      "$type": "dimension",
      "$value": "48px"
    },
    "1400": {
      "$type": "dimension",
      "$value": "56px"
    },
    "1600": {
      "$type": "dimension",
      "$value": "64px"
    },
    "1800": {
      "$type": "dimension",
      "$value": "72px"
    },
    "2000": {
      "$type": "dimension",
      "$value": "80px"
    },
    "2400": {
      "$type": "dimension",
      "$value": "96px"
    },
    "2800": {
      "$type": "dimension",
      "$value": "112px"
    },
    "3200": {
      "$type": "dimension",
      "$value": "128px"
    },
    "3400": {
      "$type": "dimension",
      "$value": "136px"
    },
    "3600": {
      "$type": "dimension",
      "$value": "144px"
    },
    "4000": {
      "$type": "dimension",
      "$value": "160px"
    },
    "5000": {
      "$type": "dimension",
      "$value": "200px"
    },
    "6200": {
      "$type": "dimension",
      "$value": "248px"
    },
    "7400": {
      "$type": "dimension",
      "$value": "296px"
    },
    "9000": {
      "$type": "dimension",
      "$value": "360px"
    },
    "025": {
      "$type": "dimension",
      "$value": "1px"
    },
    "050": {
      "$type": "dimension",
      "$value": "2px"
    },
    "075": {
      "$type": "dimension",
      "$value": "3px"
    }
  },
  "space": {
    "0": {
      "$type": "dimension",
      "$value": "{scale.0}"
    },
    "100": {
      "$type": "dimension",
      "$value": "{scale.100}"
    },
    "150": {
      "$type": "dimension",
      "$value": "{scale.150}"
    },
    "200": {
      "$type": "dimension",
      "$value": "{scale.200}"
    },
    "250": {
      "$type": "dimension",
      "$value": "{scale.250}"
    },
    "300": {
      "$type": "dimension",
      "$value": "{scale.300}"
    },
    "400": {
      "$type": "dimension",
      "$value": "{scale.400}"
    },
    "500": {
      "$type": "dimension",
      "$value": "{scale.500}"
    },
    "600": {
      "$type": "dimension",
      "$value": "{scale.600}"
    },
    "700": {
      "$type": "dimension",
      "$value": "{scale.700}"
    },
    "800": {
      "$type": "dimension",
      "$value": "{scale.800}"
    },
    "900": {
      "$type": "dimension",
      "$value": "{scale.900}"
    },
    "1000": {
      "$type": "dimension",
      "$value": "{scale.1000}"
    },
    "1200": {
      "$type": "dimension",
      "$value": "{scale.1200}"
    },
    "050": {
      "$type": "dimension",
      "$value": "{scale.050}"
    }
  },
  "transition": {
    "curve": {
      "linear": {
        "$type": "other",
        "$value": "linear"
      },
      "quick": {
        "$type": "other",
        "$value": "cubic-bezier(0,0,0.2,1)"
      },
      "base": {
        "$type": "other",
        "$value": "cubic-bezier(0.4,0,1,1)"
      },
      "expressive": {
        "$type": "other",
        "$value": "cubic-bezier(0.4,0,0.2,1)"
      },
      "bounce": {
        "$type": "other",
        "$value": "cubic-bezier(0.47,0,0.23,1.38)"
      }
    },
    "time": {
      "0": {
        "$type": "number",
        "$value": "0ms"
      },
      "100": {
        "$type": "number",
        "$value": "100ms"
      },
      "150": {
        "$type": "number",
        "$value": "150ms"
      },
      "200": {
        "$type": "number",
        "$value": "200ms"
      },
      "300": {
        "$type": "number",
        "$value": "300ms"
      },
      "500": {
        "$type": "number",
        "$value": "500ms"
      },
      "1000": {
        "$type": "number",
        "$value": "1000ms"
      },
      "1500": {
        "$type": "number",
        "$value": "1500ms"
      }
    }
  },
  "font": {
    "font-family": {
      "default": {
        "$type": "fontFamilies",
        "$value": "-apple-system, system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\""
      }
    },
    "font-weight": {
      "thin": {
        "$type": "fontWeights",
        "$value": "100"
      },
      "extra-light": {
        "$type": "fontWeights",
        "$value": "200"
      },
      "light": {
        "$type": "fontWeights",
        "$value": "300"
      },
      "regular": {
        "$type": "fontWeights",
        "$value": "400"
      },
      "medium": {
        "$type": "fontWeights",
        "$value": "500"
      },
      "semi-bold": {
        "$type": "fontWeights",
        "$value": "600"
      },
      "bold": {
        "$type": "fontWeights",
        "$value": "700"
      },
      "extra-bold": {
        "$type": "fontWeights",
        "$value": "800"
      },
      "black": {
        "$type": "fontWeights",
        "$value": "900"
      }
    },
    "font-size": {
      "275": {
        "$type": "fontSizes",
        "$value": "11px"
      },
      "300": {
        "$type": "fontSizes",
        "$value": "12px"
      },
      "350": {
        "$type": "fontSizes",
        "$value": "14px"
      },
      "400": {
        "$type": "fontSizes",
        "$value": "16px"
      },
      "450": {
        "$type": "fontSizes",
        "$value": "18px"
      },
      "500": {
        "$type": "fontSizes",
        "$value": "20px"
      },
      "550": {
        "$type": "fontSizes",
        "$value": "22px"
      },
      "600": {
        "$type": "fontSizes",
        "$value": "24px"
      },
      "650": {
        "$type": "fontSizes",
        "$value": "26px"
      },
      "700": {
        "$type": "fontSizes",
        "$value": "28px"
      },
      "800": {
        "$type": "fontSizes",
        "$value": "32px"
      },
      "900": {
        "$type": "fontSizes",
        "$value": "36px"
      }
    },
    "letter-spacing": {
      "0": {
        "$type": "letterSpacing",
        "$value": "0%"
      },
      "1": {
        "$type": "letterSpacing",
        "$value": "1%"
      },
      "2": {
        "$type": "letterSpacing",
        "$value": "1.5%"
      }
    },
    "line-height": {
      "300": {
        "$type": "lineHeights",
        "$value": "{scale.300}"
      },
      "400": {
        "$type": "lineHeights",
        "$value": "{scale.400}"
      },
      "500": {
        "$type": "lineHeights",
        "$value": "{scale.500}"
      },
      "600": {
        "$type": "lineHeights",
        "$value": "{scale.600}"
      },
      "700": {
        "$type": "lineHeights",
        "$value": "{scale.700}"
      },
      "800": {
        "$type": "lineHeights",
        "$value": "{scale.800}"
      },
      "900": {
        "$type": "lineHeights",
        "$value": "{scale.900}"
      },
      "1100": {
        "$type": "lineHeights",
        "$value": "{scale.1100}"
      },
      "1200": {
        "$type": "lineHeights",
        "$value": "{scale.1200}"
      },
      "full": {
        "$type": "lineHeights",
        "$value": "100%"
      }
    }
  },
  "z-index": {
    "0": {
      "$type": "number",
      "$value": "0"
    },
    "100": {
      "$type": "number",
      "$value": "100"
    },
    "200": {
      "$type": "number",
      "$value": "200"
    },
    "300": {
      "$type": "number",
      "$value": "300"
    },
    "400": {
      "$type": "number",
      "$value": "400"
    },
    "500": {
      "$type": "number",
      "$value": "500"
    },
    "bottom": {
      "$type": "number",
      "$value": "-99999"
    },
    "top": {
      "$type": "number",
      "$value": "99999"
    }
  }
}