1. Color variables (SCSS)

$colorPeach100: #ffefe1;    
$colorPeach200: #ffdbc4;    
$colorPeach300: #ffc3a6;   
/* ... */ 
$colorBgPrimaryExtralight: $colorObsidian50;    
$colorTextDefault: $colorGray900;    
$colorTextHint: $colorGray700;    
$colorTextContrast: $colorGray0;  
/* etc. */ 

2. Font variables (SCSS)

.lead1Default {
	font-weight: 400;
	font-size: 1.125em;
	line-height: 27px;
	letter-spacing: 0;
	text-indent: 0;
}

.body1Default {
	font-weight: 400;
	font-size: 1em;
	line-height: 24px;
	letter-spacing: 0;
	text-indent: 0;
}

.body2Default {
	font-weight: 400;
	font-size: 0.875em;
	line-height: 21px;
	letter-spacing: 0;
	text-indent: 0;
}

.labelDefaultLarge {
	font-weight: 400;
	font-size: 1em;
	line-height: 24px;
	letter-spacing: 0;
	text-indent: 0;
}

/*etc..*/  

3. No-component languages button styles (SCSS)

$button-sizes: 
    "large" 12px 24px 8px, 
    "medium" 8px 16px 6px, 
    "small" 6px 12px 4px;

.button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
	transition: all .3s;
}

$variants: 
    'primary' 
        $colorTextPrimaryDefault 
        $colorTextContrast
        $colorBgPrimaryDefault 
        $colorBorderPrimaryDefault
        $colorTextPrimaryInteractive 
        $colorBgPrimaryInteractive
        $colorBorderPrimaryInteractive 
        $colorBgPrimaryExtralight,
    'error' 
        $colorTextErrorDefault 
        $colorTextContrast
        /* etc... */

@each $name,
$textDefault,
$textDefaultOnSurface,
$bgDefault,
$borderDefault,
$textInteractive,
$bgInteractive,
$borderInteractive,
$bgLight in $variants {
    .button-#{$name} {
        &-filled {
            @each $size,
            $v-padding,
            $h-padding,
            $gap in $button-sizes {
                &-#{$size} {
                    @extend .button;
                    background-color: $bgDefault;
                    color: $textDefaultOnSurface;
                    border: 1px solid $borderDefault;

                    &:hover,
                    &:active,
                    &:focus {
                        background-color: $bgInteractive;
                        color: $textDefaultOnSurface;
                    }

                    svg {
                        fill: $textDefaultOnSurface;
                    }

                    @if $size ==large {
                        @include orchLabelDefaultLarge;
                    }

                    @else if $size ==medium {
                        @include orchLabelDefaultMedium;
                    }

                    @else if $size ==small {
                        @include orchLabelDefaultSmall;
                    }

                    padding: $v-padding $h-padding;
                    gap: $gap;
                }
            }
        }

        &-outlined {

            @each $size,
            $v-padding,
            /*etc...*/
            }
        }
    }
}

.fill {
    width: 100%;
}