refactor(labels): move the color label variants to the separate file …

…and add color variants separate for the dark and light theme, move Sass files to the labels directory.

src/labels/_index.scss

@@ -0,0 +1,2 @@
+@forward 'labels';
+@forward 'labels.variants';

src/labels/_labels.scss

@@ -0,0 +1,29 @@
+// Variables.
+@use '../variables/core' as *;
+
+// Mixins.
+@use '../mixins/border' as *;
+@use '../mixins/color/background.mixin' as *;
+@use '../mixins/color/color.mixin' as *;
+@use '../mixins/label' as *;
+@use '../mixins/padding-size-variants.mixin' as *;
+
+// Labels
+.label,
+.#{$var-prefix}-label {
+  display: inline-block;
+
+  @include label-base();
+  @include background('bg-dark');
+  @include color(('body-font', +5%));
+
+  // Label rounded
+  &.label-rounded {
+    border-radius: 5rem;
+    padding-left: 0.4rem;
+    padding-right: 0.4rem;
+  }
+
+  // Padding size
+  @include padding-size-variants('label');
+}

src/labels/_labels.variants.scss

@@ -0,0 +1,121 @@
+// Variables.
+@use '../variables/core' as *;
+
+// Mixins.
+@use '../mixins/label' as *;
+
+// Labels
+.label,
+.#{$var-prefix}-label {
+  @media (prefers-color-scheme: dark) {
+    // Label color variants.
+    // - Shades.
+    @include label-variant('dark', 'dark-color', 'light-color');
+    @include label-variant('light', 'light-color', 'dark-color');
+
+    // - Core colors.
+    // -- Accent.
+    @include label-variant('accent', 'accent-color', 'light-color');
+
+    // -- Primary.
+    @include label-variant('primary', 'primary-color', 'light-color');
+    @include label-variant('primary-dark', 'primary-color-dark', ('primary-color-dark', 40%)); // ! New label color variant.
+    @include label-variant('primary-light', 'primary-color-light', ('primary-color-light', 40%)); // ! New label color variant.
+
+    // -- Secondary.
+    @include label-variant('secondary', 'secondary-color', ('secondary-color', -40%));
+    @include label-variant('secondary-dark', 'secondary-color-dark', ('secondary-color-dark', -40%)); // ! New label color variant.
+    @include label-variant('secondary-light', 'secondary-color-light', ('secondary-color-light', -40%)); // ! New label color variant.
+
+    // - Gray colors.
+    @include label-variant('gray', 'gray-color', ('gray-color', 20%)); // ! New label color variant.
+    @include label-variant('gray-dark', 'gray-color-dark', 'gray-color-light'); // ! New label color variant.
+    @include label-variant('gray-light', 'gray-color-light', 'gray-color-dark'); // ! New label color variant.
+
+    // - Bg colors.
+    @include label-variant('bg', 'bg-color', 'body-font-color'); // ! New label color variant.
+    @include label-variant('bg-dark', 'bg-color-dark', ('bg-color-dark', -50%)); // ! New label color variant.
+    @include label-variant('bg-light', 'bg-color-light', ('bg-color-light', -50%)); // ! New label color variant.
+
+    // - Border colors.
+    @include label-variant('border', 'border-color', ('border-color', -40%)); // ! New label color variant.
+    @include label-variant('border-dark', 'border-color-dark', ('border-color-dark', 60%)); // ! New label color variant.
+    @include label-variant('border-light', 'border-color-light', ('border-color-light', -40%)); // ! New label color variant.
+
+    // - Link colors.
+    @include label-variant('link', 'link-color', ('link-color', 40%)); // ! New label color variant.
+    @include label-variant('link-dark', 'link-color-dark', ('link-color-dark', 60%)); // ! New label color variant.
+    @include label-variant('link-light', 'link-color-light', ('link-color-light', 30%)); // ! New label color variant.
+
+    // - Control colors.
+    @include label-variant('disabled', 'disabled-color', ('disabled-color', -10%));
+    @include label-variant('error', 'error-color', 'light-color');
+    @include label-variant('info', 'info-color', ('info-color', -50%));
+    @include label-variant('success', 'success-color', 'light-color');
+    @include label-variant('warning', 'warning-color', 'light-color');
+
+    // - Body colors.
+    @include label-variant('body-bg', 'body-bg-color', 'body-font-color'); // ! New label color variant.
+    @include label-variant('body-font', 'body-font-color', 'body-bg-color'); // ! New label color variant.
+
+    // - Other colors.
+    @include label-variant('code', 'code-color', ('code-color', 50%)); // ! New label color variant.
+    @include label-variant('highlight', 'highlight-color', ('highlight-color', -50%)); // ! New label color variant.
+  }
+
+  @media (prefers-color-scheme: light) {
+    // Label color variants.
+    // - Shades.
+    @include label-variant('dark', 'dark-color', 'light-color');
+    @include label-variant('light', 'light-color', 'dark-color');
+
+    // - Core colors.
+    // -- Accent.
+    @include label-variant('accent', 'accent-color', 'light-color');
+
+    // -- Primary.
+    @include label-variant('primary', 'primary-color', 'light-color');
+    @include label-variant('primary-dark', 'primary-color-dark', ('primary-color-dark', 40%)); // ! New label color variant.
+    @include label-variant('primary-light', 'primary-color-light', ('primary-color-light', 40%)); // ! New label color variant.
+
+    // -- Secondary.
+    @include label-variant('secondary', 'secondary-color', ('secondary-color', -40%));
+    @include label-variant('secondary-dark', 'secondary-color-dark', ('secondary-color-dark', -40%)); // ! New label color variant.
+    @include label-variant('secondary-light', 'secondary-color-light', ('secondary-color-light', -40%)); // ! New label color variant.
+
+    // - Gray colors.
+    @include label-variant('gray', 'gray-color', ('gray-color', 20%)); // ! New label color variant.
+    @include label-variant('gray-dark', 'gray-color-dark', 'gray-color-light'); // ! New label color variant.
+    @include label-variant('gray-light', 'gray-color-light', 'gray-color-dark'); // ! New label color variant.
+
+    // - Bg colors.
+    @include label-variant('bg', 'bg-color', 'body-font-color'); // ! New label color variant.
+    @include label-variant('bg-dark', 'bg-color-dark', ('bg-color-dark', -50%)); // ! New label color variant.
+    @include label-variant('bg-light', 'bg-color-light', ('bg-color-light', -50%)); // ! New label color variant.
+
+    // - Border colors.
+    @include label-variant('border', 'border-color', ('border-color', -40%)); // ! New label color variant.
+    @include label-variant('border-dark', 'border-color-dark', ('border-color-dark', 60%)); // ! New label color variant.
+    @include label-variant('border-light', 'border-color-light', ('border-color-light', -40%)); // ! New label color variant.
+
+    // - Link colors.
+    @include label-variant('link', 'link-color', ('link-color', 40%)); // ! New label color variant.
+    @include label-variant('link-dark', 'link-color-dark', ('link-color-dark', 60%)); // ! New label color variant.
+    @include label-variant('link-light', 'link-color-light', ('link-color-light', 30%)); // ! New label color variant.
+
+    // - Control colors.
+    @include label-variant('disabled', 'disabled-color', ('disabled-color', -10%));
+    @include label-variant('error', 'error-color', 'light-color');
+    @include label-variant('info', 'info-color', ('info-color', -50%));
+    @include label-variant('success', 'success-color', 'light-color');
+    @include label-variant('warning', 'warning-color', 'light-color');
+
+    // - Body colors.
+    @include label-variant('body-bg', 'body-bg-color', 'body-font-color'); // ! New label color variant.
+    @include label-variant('body-font', 'body-font-color', 'body-bg-color'); // ! New label color variant.
+
+    // - Other colors.
+    @include label-variant('code', 'code-color', ('code-color', 50%)); // ! New label color variant.
+    @include label-variant('highlight', 'highlight-color', ('highlight-color', -50%)); // ! New label color variant.
+  }
+}