So how do we actually use these theme variables inside our web components? What are the best practices around putting this spec into practice?

Recommend attaching theme variables to :root loaded via a single css file. For example:

:root {
  --theme--var1: foo;
  --theme--var2: bar;
  --theme--var3: bat;
}

Inside your web component it's important not to redefine the value of theme variables. Because they cascade, this would interrupt the inherit meaning and customization provided by those definitions. Replace local with the name of the custom element implementing the styles.

:host {
   foo: var(--local--var1, var(--theme--var1, fallback));
}

Inside the stylesheet for your vanilla HTML, you can add in hooks to the theme:

.foo {
   foo: var(--theme--var1, fallback);
}