From b82878c8c0c891f9aed35e01db9df1c141e8c3f1 Mon Sep 17 00:00:00 2001 From: angularpackage Date: Tue, 7 Jun 2022 00:24:23 +0000 Subject: [PATCH] refactor(css-variables): separate defines to different files, add css variable `disabled-color`, --- src/_css-variables.scss | 92 -------------------------- src/css-variables/_bg-colors.scss | 11 +++ src/css-variables/_body-colors.scss | 10 +++ src/css-variables/_border-colors.scss | 11 +++ src/css-variables/_color-scheme.scss | 7 ++ src/css-variables/_control-colors.scss | 13 ++++ src/css-variables/_core-colors.scss | 27 ++++++++ src/css-variables/_gray-colors.scss | 11 +++ src/css-variables/_link-colors.scss | 11 +++ src/css-variables/_other-colors.scss | 10 +++ 10 files changed, 111 insertions(+), 92 deletions(-) delete mode 100644 src/_css-variables.scss create mode 100644 src/css-variables/_bg-colors.scss create mode 100644 src/css-variables/_body-colors.scss create mode 100644 src/css-variables/_border-colors.scss create mode 100644 src/css-variables/_color-scheme.scss create mode 100644 src/css-variables/_control-colors.scss create mode 100644 src/css-variables/_core-colors.scss create mode 100644 src/css-variables/_gray-colors.scss create mode 100644 src/css-variables/_link-colors.scss create mode 100644 src/css-variables/_other-colors.scss diff --git a/src/_css-variables.scss b/src/_css-variables.scss deleted file mode 100644 index 94ebd47ef..000000000 --- a/src/_css-variables.scss +++ /dev/null @@ -1,92 +0,0 @@ -@use 'mixins/define-color-based-on' as *; -@use 'mixins/define-color' as *; -@use 'mixins/set-var' as *; -@use 'variables' as *; - -/* - Color scheme in :root and :host. -*/ -:root, :host { - // Scheme. - color-scheme: normal; // light, dark, light dark -} - -/* - Spectre.css colors. Alphabetical order. -*/ -:root, :host { - // Core colors: accent. - @include define-color('accent-color', $accent-color); // #9932CC - - // Background colors. - @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 - - // Body colors. - @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%) - - // Border colors. - @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%) - - // Other colors. - @include define-color('code-color', $code-color); // #d73e48 - - // Core colors: dark. - @include define-color('dark-color', $dark-color); // #303742 - - // Control colors. - @include define-color('disabled-color', $disabled-color); // ! New. - @include define-color('error-color', $error-color); // #e85600 - - // Gray colors. - @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%) - - // Other colors. - @include define-color('highlight-color', $highlight-color); // #ffe9b3 - - // Control colors. - @include define-color('info-color', $info-color); // #d9edf7 - - // Light. - @include define-color('light-color', $light-color); // #ffffff - - // Link colors. - @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%) - - // 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; - - // Control colors. - @include define-color('success-color', $success-color); // #32b643 - @include define-color('warning-color', $warning-color); // #ffb700 -} - -/* - Font and line height. Alphabetical order. -*/ -:root, :host { - // Font sizes. - @include set-var('font-size', $font-size); // 0.8rem - @include set-var('font-size', $font-size-lg, $suffix: 'lg'); // 0.9rem - @include set-var('font-size', $font-size-sm, $suffix: 'sm'); // 0.7rem - @include set-var('html-font-size', $html-font-size); // 20px - - // Line height. - @include set-var('html-line-height', $html-line-height); // 1.5 - @include set-var('line-height', $line-height); // 1.2rem -} diff --git a/src/css-variables/_bg-colors.scss b/src/css-variables/_bg-colors.scss new file mode 100644 index 000000000..1f174df88 --- /dev/null +++ b/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 +} diff --git a/src/css-variables/_body-colors.scss b/src/css-variables/_body-colors.scss new file mode 100644 index 000000000..0db189a2f --- /dev/null +++ b/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%) +} diff --git a/src/css-variables/_border-colors.scss b/src/css-variables/_border-colors.scss new file mode 100644 index 000000000..8bc9bf77f --- /dev/null +++ b/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%) +} diff --git a/src/css-variables/_color-scheme.scss b/src/css-variables/_color-scheme.scss new file mode 100644 index 000000000..3076e90a5 --- /dev/null +++ b/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 +} diff --git a/src/css-variables/_control-colors.scss b/src/css-variables/_control-colors.scss new file mode 100644 index 000000000..99ace4964 --- /dev/null +++ b/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 +} diff --git a/src/css-variables/_core-colors.scss b/src/css-variables/_core-colors.scss new file mode 100644 index 000000000..64abfc81e --- /dev/null +++ b/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; +} diff --git a/src/css-variables/_gray-colors.scss b/src/css-variables/_gray-colors.scss new file mode 100644 index 000000000..87159fe1d --- /dev/null +++ b/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%) +} diff --git a/src/css-variables/_link-colors.scss b/src/css-variables/_link-colors.scss new file mode 100644 index 000000000..78b27411a --- /dev/null +++ b/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%) +} diff --git a/src/css-variables/_other-colors.scss b/src/css-variables/_other-colors.scss new file mode 100644 index 000000000..ee6a42f17 --- /dev/null +++ b/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 +}