@tablecheck/tablekit-react

Developer Experience with VSCode

When using the VSCode Styled Global Variables Autocomplete plugin, add the following to the Variables Autocomplete: Include setting to get autocomplete in all projects and inside the tablekit repo as well; {src,node_modules/@tablecheck/tablekit-react/lib/esm}/{**/theme,**/themes,**/typography,**/colors,**/globalUtilCss,themeVariables/*,utils/*}.{ts,js,tsx,jsx}

Fonts

Tablekit ships by default with a lot of fallback fonts, our preference is using @ibm/plex but you will need to host these fonts yourselves. If you want to self host on a CDN you can use this snippet as a basis.

The font-family names we have defined are; IBM Plex Sans IBM Plex Sans Arabic and IBM Plex Sans Thai Looped.

We detect which font set to use by the :lang() selector, which combines the language of the browser and the lang="" attribute at the html tag level, and the [data-country] attribute which should usually be set on the html element. See the table below for how each font-family is loaded.

Language	Country	Font Family
unknown	unknown	IBM Plex Sans + Chinese inbuilt fonts
ja	jp (when language is not zh*)	IBM Plex Sans + Japanese inbuilt fonts
ar	dz, bh, td, km, dj, eg, er, iq, jo, kw, lb, ly, mr, ma, om, ps, qa, sa, so, sd, sy, tz, tn, ae, ye	IBM Plex Sans Arabic
th	th	IBM Plex Sans Thai Looped
ko	kr	IBM Plex Sans + Korean inbuilt fonts

@font-face {
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans ExtraLight'), local('IBM Plex Sans-ExtraLight'),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-ExtraLight.woff2') format('woff2'),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-ExtraLight.woff') format('woff');
  font-display: swap;
  font-style: normal;
  font-weight: 200;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans ExtraLight Italic'), local(
      'IBM Plex Sans-ExtraLightItalic'
    ),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-ExtraLightItalic.woff2')
      format('woff2'), url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-ExtraLightItalic.woff')
      format('woff');
  font-display: swap;
  font-style: italic;
  font-weight: 200;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans Light'), local('IBM Plex Sans-Light'),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-Light.woff2') format('woff2'),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-Light.woff') format('woff');
  font-display: swap;
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans Light Italic'), local('IBM Plex Sans-LightItalic'),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-LightItalic.woff2')
      format('woff2'), url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-LightItalic.woff')
      format('woff');
  font-display: swap;
  font-style: italic;
  font-weight: 300;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans Regular'), local('IBM Plex Sans-Regular'),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-Regular.woff2') format('woff2'),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-Regular.woff') format('woff');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans Regular Italic'), local(
      'IBM Plex Sans-RegularItalic'
    ),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-Italic.woff2') format('woff2'),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-Italic.woff') format('woff');
  font-display: swap;
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans Medium'), local('IBM Plex Sans-Medium'),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-Medium.woff2') format('woff2'),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-Medium.woff') format('woff');
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans Medium Italic'), local(
      'IBM Plex Sans-MediumItalic'
    ),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-MediumItalic.woff2')
      format('woff2'), url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-MediumItalic.woff')
      format('woff');
  font-display: swap;
  font-style: italic;
  font-weight: 500;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans SemiBold'), local('IBM Plex Sans-SemiBold'),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-SemiBold.woff2') format('woff2'),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-SemiBold.woff') format('woff');
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans SemiBold Italic'), local(
      'IBM Plex Sans-SemiBoldItalic'
    ),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-SemiBoldItalic.woff2')
      format('woff2'), url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-SemiBoldItalic.woff')
      format('woff');
  font-display: swap;
  font-style: italic;
  font-weight: 600;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans Bold'), local('IBM Plex Sans-Bold'),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-Bold.woff2') format('woff2'),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-Bold.woff') format('woff');
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans Bold Italic'), local('IBM Plex Sans-BoldItalic'),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-BoldItalic.woff2') format('woff2'),
    url('https://cdn.url.here/IBMPlex-Sans/IBMPlexSans-BoldItalic.woff') format('woff');
  font-display: swap;
  font-style: italic;
  font-weight: 700;
}