Sass Design System Concept

_tokens.scss

// COLOR
// ────────────────────────────────────
$colors: (
  'red.100': #FFF5F5,
  'red.200': #FBD0D0,
  'red.300': #EF5D5D,
  'brick.100': #FFF7F5,
  'brick.200': #FED9CD,
  'brick.300': #E5653C,
  'orange.100': #FFF6F0,
  'orange.200': #FDE2CE,
  'orange.300': #F7934A,
  'yellow.100': #FFF9EB,
  'yellow.200': #FDF0CE,
  'yellow.300': #F8CC5C,
  'lime.100': #F1FFEB,
  'lime.200': #DEFAD1,
  'lime.300': #8BEF5D,
  'green.100': #F0FFF7,
  'green.200': #D2F9E6,
  'green.300': #56E99F,
  'teal.100': #F0FBFF,
  'teal.200': #D0F0FB,
  'teal.300': #5ACCF0,
  'blue.100': #F5F8FF,
  'blue.200': #D1DDFA,
  'blue.300': #5D8AEF,
  'purple.100': #F8F5FF,
  'purple.200': #DED1FA,
  'purple.300': #8B5DEF,
  'magenta.100': #FFF5FC,
  'magenta.200': #FAD1EF,
  'magenta.300': #EF5DC6,
  'neutral.100': #FFFFFF,
  'neutral.200': #F2F2F2,
  'neutral.300': #E1E0E0,
  'neutral.400': #D3D2D3,
  'neutral.500': #969195,
  'neutral.600': #645D62,
  'neutral.700': #40363D,
  'neutral.800': #201F20,
);

:root {
  --color-red-100: #{map.get($colors, 'red.100')};
  --color-red-200: #{map.get($colors, 'red.200')};
  --color-red-300: #{map.get($colors, 'red.300')};
  --color-brick-100: #{map.get($colors, 'brick.100')};
  --color-brick-200: #{map.get($colors, 'brick.200')};
  --color-brick-300: #{map.get($colors, 'brick.300')};
  --color-orange-100: #{map.get($colors, 'orange.100')};
  --color-orange-200: #{map.get($colors, 'orange.200')};
  --color-orange-300: #{map.get($colors, 'orange.300')};
  --color-yellow-100: #{map.get($colors, 'yellow.100')};
  --color-yellow-200: #{map.get($colors, 'yellow.200')};
  --color-yellow-300: #{map.get($colors, 'yellow.300')};
  --color-lime-100: #{map.get($colors, 'lime.100')};
  --color-lime-200: #{map.get($colors, 'lime.200')};
  --color-lime-300: #{map.get($colors, 'lime.300')};
  --color-green-100: #{map.get($colors, 'green.100')};
  --color-green-200: #{map.get($colors, 'green.200')};
  --color-green-300: #{map.get($colors, 'green.300')};
  --color-teal-100: #{map.get($colors, 'teal.100')};
  --color-teal-200: #{map.get($colors, 'teal.200')};
  --color-teal-300: #{map.get($colors, 'teal.300')};
  --color-blue-100: #{map.get($colors, 'blue.100')};
  --color-blue-200: #{map.get($colors, 'blue.200')};
  --color-blue-300: #{map.get($colors, 'blue.300')};
  --color-purple-100: #{map.get($colors, 'purple.100')};
  --color-purple-200: #{map.get($colors, 'purple.200')};
  --color-purple-300: #{map.get($colors, 'purple.300')};
  --color-magenta-100: #{map.get($colors, 'magenta.100')};
  --color-magenta-200: #{map.get($colors, 'magenta.200')};
  --color-magenta-300: #{map.get($colors, 'magenta.300')};
  --color-neutral-100: #{map.get($colors, 'neutral.100')};
  --color-neutral-200: #{map.get($colors, 'neutral.200')};
  --color-neutral-300: #{map.get($colors, 'neutral.300')};
  --color-neutral-400: #{map.get($colors, 'neutral.400')};
  --color-neutral-500: #{map.get($colors, 'neutral.500')};
  --color-neutral-600: #{map.get($colors, 'neutral.600')};
  --color-neutral-700: #{map.get($colors, 'neutral.700')};
  --color-neutral-800: #{map.get($colors, 'neutral.800')};
}

$colorTokens: (
  'red.100': var(--color-red-100),
  'red.200': var(--color-red-200),
  'red.300': var(--color-red-300),
  'brick.100': var(--color-brick-100),
  'brick.200': var(--color-brick-200),
  'brick.300': var(--color-brick-300),
  'orange.100': var(--color-orange-100),
  'orange.200': var(--color-orange-200),
  'orange.300': var(--color-orange-300),
  'yellow.100': var(--color-yellow-100),
  'yellow.200': var(--color-yellow-200),
  'yellow.300': var(--color-yellow-300),
  'lime.100': var(--color-lime-100),
  'lime.200': var(--color-lime-200),
  'lime.300': var(--color-lime-300),
  'green.100': var(--color-green-100),
  'green.200': var(--color-green-200),
  'green.300': var(--color-green-300),
  'teal.100': var(--color-teal-100),
  'teal.200': var(--color-teal-200),
  'teal.300': var(--color-teal-300),
  'blue.100': var(--color-blue-100),
  'blue.200': var(--color-blue-200),
  'blue.300': var(--color-blue-300),
  'purple.100': var(--color-purple-100),
  'purple.200': var(--color-purple-200),
  'purple.300': var(--color-purple-300),
  'magenta.100': var(--color-magenta-100),
  'magenta.200': var(--color-magenta-200),
  'magenta.300': var(--color-magenta-300),
  'neutral.100': var(--color-neutral-100),
  'neutral.200': var(--color-neutral-200),
  'neutral.300': var(--color-neutral-300),
  'neutral.400': var(--color-neutral-400),
  'neutral.500': var(--color-neutral-500),
  'neutral.600': var(--color-neutral-600),
  'neutral.700': var(--color-neutral-700),
  'neutral.800': var(--color-neutral-800),
);


// TYPOGRAPHY
// ────────────────────────────────────
$font-degular: 'degular, Inter, --font-fallback';
$font-mono: var(--font-cartograph), SFMono-Medium, 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace;
$fonts: (
  base: $font-degular,
  sans: $font-degular,
  mono: $font-mono,
);

$font-sizes: (
  'base': rem(16),
  'base.mobile': rem(16),
  'base.desktop': rem(16),
  'large': rem(24),
  'large.mobile': rem(20),
  'large.desktop': rem(24),
  'small': rem(15),
  'smallest': rem(14),
);

@function color($key) {
  @return map.get($colorTokens, $key);
}

// SPACING
// ────────────────────────────────────

$spaceTokens: (
  'space.0': 0,
  'space.025': rem(2),
  'space.050': rem(4),
  'space.075': rem(6),
  'space.100': rem(8),
  'space.150': rem(12),
  'space.200': rem(16),
  'space.250': rem(20),
  'space.300': rem(24),
  'space.400': rem(32),
  'space.500': rem(40),
  'space.600': rem(48),
  'space.800': rem(64),
  'space.1000': rem(80),
);

@function space($key) {
  @return map.get($spaceTokens, $key);
}

// BREAKPOINTS
// ────────────────────────────────────
$breakpoints: (
  xxs: 0px,
  xs:  480px,
  sm:  768px,
  md:  1024px,
  lg:  1440px,
  xl:  1760px,
);

some.svelte

<style lang="scss">
  .some {
    color: tokens.color('red.300');
    padding: tokens.color('space.100');
  }
</style>