_colors.scss

:root {
  @import '@design-system/colors.json';

  --root-colors--primary: #{$primary};
  --root-colors--secondary: #{$secondary};
}

_sizes.scss

:root {
  // notice that these json variables are private and available only in this context!
  @import '@design-system/sizes.json';

  // Notice the use of vanilla css vars to enable the editor autocomplete ;)
  --root-sizes--y-stack: #{$y-stack};
  --root-sizes--x-stack: #{$x-stack};

  --root-sizes--border-radius: #{$border-radius};
}

colors.json

{
  "primary": "yellow",
  "secondary": "red"
}

confluence.json

{
    "my-component": {
      "id": "page-specs-id"
    }
}

figma.json

{
    "my-component": {
        "names": ["Hover State"],
        "ids": "0%3A7243"
    }
}

my-component.scss

.my-component {
  // notice the aliasing with semantic names for the components inner variables
  --text-x-padding: var(--root-sizes--y-stack);
  --text-color: var(--root-colors--primary);

  p {
    color: var(--text-color);

    padding: {
      left: var(--text-x-padding);
      right: var(--text-x-padding);
    }
  }
}

my-component.story.js

import figma from '@design-system/figma.json';
import confluence from '@design-system/confluence.json';

const COMPONENT_NAME = 'my-component';
const stories = storiesOf('Simple Example', module);

stories.add(
    'Hover state',
    () => <SimpleExample />,
    {
        figma: figma[COMPONENT_NAME],
        confluence: confluence[COMPONENT_NAME],
    },
);

sizes.json

{
  "y-stack": "24px",
  "x-stack": "16px",
  "border-radius": "8px"
}