Proper way to use the design system: which packages to import?

[ngmgit]

So I have been using carbon-svelte-components package and I am not sure if I am fully correct on this one, do I need to import individual package like layout, type, etc if I want to properly integrate and use the carbon design system. I wanted to use the spacing variables required to add margin, padding etc. So I added the @carbon/layout package and imported the scss variable via vite config. And I was able to use those variables.

1. Now I want to able to use the package which can provide the colors, font size etc so should I use include this scss file https://github.com/carbon-design-system/carbon/blob/main/packages/type/scss/_styles.scss

2. Another question, is what I am doing above redundant? does the carbon-svelte-components provide these scss variables already? If so how can I use it?

Update:
https://github.com/carbon-design-system/carbon-components-svelte#scss, This section is not that helpful, tried adding the scss file in my vite config as follow but I get "Connection Lost" with lot of unused css selector warning error on terminal.
Steps:

1. installed carbon-components packages.
2. removed the css import statement i.e import "carbon-components-svelte/css/all.css"; from the project
3. update the vite config as follow.

import { defineConfig } from 'vitest/config';

export default defineConfig({
	plugins: [sveltekit()],
	css: {
		preprocessorOptions: {
			// if using SCSS
			scss: {
				additionalData: `@use 'carbon-components/scss/globals/scss/styles.scss' as carbon;`
			}
			// if using SASS
			// sass: {}
		}
	},
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	}
});