share scss variables to css variables (svelte + smui material)

@use 'sass:color';

@use '@material/theme/color-palette';  
  
// Svelte Colors!  
@use '@material/theme/index' as theme with (  
  $primary: color-palette.$purple-500,  
  $secondary: color-palette.$teal-200,  
  $surface: rgba(0,0,0, 0.08),  // 8% darker than the one below
  $background: #FFFFFF,  
  $error: #B00020,  
  $on-primary: #FFFFFF,  
  $on-secondary: #000000,  
  $on-surface: #000000,  
  $on-error: #FFFFFF,  
);

:root {  
  // https://github.com/hperrin/svelte-material-ui/blob/master/THEMING.md#theming-the-bare-css  
  --mdc-theme-primary: #{theme.$primary};  
  --mdc-theme-secondary: #{theme.$secondary};  
  --mdc-theme-background: #{theme.$background};  
  --mdc-theme-surface: #{theme.$surface};  
  --mdc-theme-error: #{theme.$error};  
  --mdc-theme-on-primary: #{theme.$on-primary};  
  --mdc-theme-on-secondary: #{theme.$on-secondary};  
  --mdc-theme-on-surface: #{theme.$on-surface};  
  --mdc-theme-on-error: #{theme.$on-error};  
}

@use 'sass:color';
@use '@material/theme/color-palette';

// Svelte Colors! (Dark Theme)  
@use '@material/theme/index' as theme with (  
  $primary: color-palette.$purple-200,  
  $secondary: color-palette.$teal-200,  
  $surface: rgba(255,255,255, 0.08),  // 8% lighter than the one below  
  $background: #121212,  
  $error: #CF6679,  
  $on-primary: #000000,  
  $on-secondary: #000000,  
  $on-surface: #FFFFFF,  
  $on-error: #000000,  
);

:root {  
  // https://github.com/hperrin/svelte-material-ui/blob/master/THEMING.md#theming-the-bare-css  
  --mdc-theme-primary: #{theme.$primary};  
  --mdc-theme-secondary: #{theme.$secondary};  
  --mdc-theme-background: #{theme.$background};  
  --mdc-theme-surface: #{theme.$surface};  
  --mdc-theme-error: #{theme.$error};  
  --mdc-theme-on-primary: #{theme.$on-primary};  
  --mdc-theme-on-secondary: #{theme.$on-secondary};  
  --mdc-theme-on-surface: #{theme.$on-surface};  
  --mdc-theme-on-error: #{theme.$on-error};  
}

:root {  
    /* for easy ide reference, --ignore-x vars are not usednowhere */
    --ignore-1: var(--mdc-theme-primary);  
    --ignore-2: var(--mdc-theme-secondary);  
    --ignore-3: var(--mdc-theme-background);  
    --ignore-4: var(--mdc-theme-surface);  
    --ignore-5: var(--mdc-theme-error);  
    --ignore-6: var(--mdc-theme-on-primary);  
    --ignore-7: var(--mdc-theme-on-secondary);  
    --ignore-8: var(--mdc-theme-on-surface);  
    --ignore-9: var(--mdc-theme-on-error);  
}

.surface {  
	/* value from scss $surface */
    background-color: var(--mdc-theme-surface);  
}

:root {
	--mdc-theme-primary: theme.$primary;
}

body {
  color: theme.$on-surface;
}