refactor(css-variables): separate defines to different files, add css…

… variable `disabled-color`,

src/css-variables/_bg-colors.scss

@@ -0,0 +1,11 @@
+@use '../mixins/define-color-based-on' as *;
+@use '../variables' as *;
+
+/*
+  Spectre.css bg colors. Alphabetical order.
+*/
+:root, :host {
+  @include define-color-based-on('bg-color', 'dark-color', $lightness: +75%); // lighten($dark-color, 75%)
+  @include define-color-based-on('bg-color-dark', 'bg-color', $lightness: -3%); // darken($bg-color, 3%)
+  @include define-color-based-on('bg-color-light', 'light-color'); // $light-color
+}

src/css-variables/_body-colors.scss

@@ -0,0 +1,10 @@
+@use '../mixins/define-color-based-on' as *;
+@use '../variables' as *;
+
+/*
+  Spectre.css body colors. Alphabetical order.
+*/
+:root, :host {
+  @include define-color-based-on('body-bg-color', 'bg-color-light'); // $bg-color-light
+  @include define-color-based-on('body-font-color', 'dark-color', $lightness: +5%); // lighten($dark-color, 5%)
+}

src/css-variables/_border-colors.scss

@@ -0,0 +1,11 @@
+@use '../mixins/define-color-based-on' as *;
+@use '../variables' as *;
+
+/*
+  Spectre.css border colors. Alphabetical order.
+*/
+:root, :host {
+  @include define-color-based-on('border-color', 'dark-color', $lightness: +65%); // lighten($dark-color, 65%)
+  @include define-color-based-on('border-color-dark', 'border-color', $lightness: -10%); // darken($border-color, 10%)
+  @include define-color-based-on('border-color-light', 'border-color', $lightness: +8%); // lighten($border-color, 8%)
+}

src/css-variables/_color-scheme.scss

@@ -0,0 +1,7 @@
+/*
+  Color scheme in :root and :host.
+*/
+:root, :host {
+  // Scheme.
+  color-scheme: normal; // light, dark, light dark
+}

src/css-variables/_control-colors.scss

@@ -0,0 +1,13 @@
+@use '../mixins/define-color' as *;
+@use '../variables' as *;
+
+/*
+  Spectre.css control colors. Alphabetical order.
+*/
+:root, :host {
+  @include define-color('disabled-color', $disabled-color); // ! New. $bg-color-dark
+  @include define-color('error-color', $error-color); // #e85600
+  @include define-color('info-color', $info-color); // #d9edf7
+  @include define-color('success-color', $success-color); // #32b643
+  @include define-color('warning-color', $warning-color); // #ffb700
+}

src/css-variables/_core-colors.scss

@@ -0,0 +1,27 @@
+@use '../mixins/define-color-based-on' as *;
+@use '../mixins/define-color' as *;
+@use '../variables' as *;
+
+/*
+  Spectre.css core colors. Alphabetical order.
+*/
+:root, :host {
+  // Accent.
+  @include define-color('accent-color', $accent-color); // #9932CC
+
+  // Dark.
+  @include define-color('dark-color', $dark-color); // #303742
+
+  // Light.
+  @include define-color('light-color', $light-color); // #ffffff
+
+  // Primary.
+  @include define-color('primary-color', $primary-color); // #5755d9
+  @include define-color-based-on('primary-color-dark', 'primary-color', $lightness: -3%); // darken($primary-color, 3%)
+  @include define-color-based-on('primary-color-light', 'primary-color', $lightness: +3%); // lighten($primary-color, 3%)
+
+  // Secondary.
+  @include define-color-based-on('secondary-color', 'primary-color', $lightness: +37.5%); // lighten($primary-color, 37.5%) !default;
+  @include define-color-based-on('secondary-color-dark', 'secondary-color', $lightness: -3%); // darken($secondary-color, 3%) !default;
+  @include define-color-based-on('secondary-color-light', 'secondary-color', $lightness: +3%); // lighten($secondary-color, 3%) !default;
+}

src/css-variables/_gray-colors.scss

@@ -0,0 +1,11 @@
+@use '../mixins/define-color-based-on' as *;
+@use '../variables' as *;
+
+/*
+  Spectre.css gray colors. Alphabetical order.
+*/
+:root, :host {
+  @include define-color-based-on('gray-color', 'dark-color', $lightness: +55%); // lighten($dark-color, 55%)
+  @include define-color-based-on('gray-color-dark', 'gray-color', $lightness: -30%); // darken($gray-color, 30%)
+  @include define-color-based-on('gray-color-light', 'gray-color', $lightness: +20%); // lighten($gray-color, 20%)
+}

src/css-variables/_link-colors.scss

@@ -0,0 +1,11 @@
+@use '../mixins/define-color-based-on' as *;
+@use '../variables' as *;
+
+/*
+  Spectre.css link colors. Alphabetical order.
+*/
+:root, :host {
+  @include define-color-based-on('link-color', 'primary-color'); // $primary-color
+  @include define-color-based-on('link-color-dark', 'link-color', $lightness: -10%); // darken($link-color, 10%)
+  @include define-color-based-on('link-color-light', 'link-color', $lightness: +10%); // lighten($link-color, 10%)
+}

src/css-variables/_other-colors.scss

@@ -0,0 +1,10 @@
+@use '../mixins/define-color' as *;
+@use '../variables' as *;
+
+/*
+  Spectre.css other colors. Alphabetical order.
+*/
+:root, :host {
+  @include define-color('code-color', $code-color); // #d73e48
+  @include define-color('highlight-color', $highlight-color); // #ffe9b3
+}