diff --git a/scss/config/_variable-overrides.scss b/scss/config/_variable-overrides.scss index 2fcf7f7..76c3986 100644 --- a/scss/config/_variable-overrides.scss +++ b/scss/config/_variable-overrides.scss @@ -5,70 +5,73 @@ // // Every Sass variable and map in the `Framework SASS` source files includes // the '!default' flag allowing you to override the default value from here -// without modifying the `Framework SASS` source files code. Copy and paste -// variables or maps as needed, modify their values, and remove the -// '!default' flag. +// without modifying the `Framework SASS` source files code. // // If a variable has already been assigned, then it won’t be re-assigned by // the default values comig from the the `Framework SASS` source files. // // You will find the complete list of the `Framework SASS` variables and -// maps in the following files: -// ./THEMENAME/_sass-framework/variables/_options.scss -// ./THEMENAME/_sass-framework/variables/_colors.scss -// ./THEMENAME/_sass-framework/variables/_base.scss -// ./THEMENAME/_sass-framework/variables/_layout.scss -// ./THEMENAME/_sass-framework/variables/_components.scss -// ./THEMENAME/_sass-framework/variables/_selectors.scss +// maps at the following URL address: +// https://github.com/smillart/Framework-SASS-Source-Files/blob/2.0.x/SASS-REFERENCE.md#variables // - -// Table of Contents +// To load a module with configuration, write: +// +// @forward with ( +// : , +// : , +// ); +// +// Example: +// +// $new-blue: #1e90ff; +// $new-red: #b22222; +// $aqua: #00ffff; +// $fire: #ff0000; +// +// @forward '../../_sass-framework/utilities/color/colors' with ( +// $blue: $new-blue, +// $red: $new-red, +// ); +// +// @forward '../../_sass-framework/utilities/color/schemes' with ( +// $schemes: ( +// 'aqua': $aqua, +// 'fire': $fire, +// ), +// ); +// +// The configured values will override the variables’ default values. // -// Color palette -// Fonts -// Body -// System - - -// Color palette -// ==================================================================================================== -// Define overridden and custom colors as consistent color scheme for use across the theme. - -// Kiso (基礎) custom color scheme: - -$slate: #405b77; - -// Kiso (基礎) custom shades of gray. - -$gray-100: #f8f9fa; -$gray-700: #495057; -// Kiso overrides and new custom colors to be merged with the "Theme color scheme" map: +// Custom variables +// +// Add reusable selector strings within the "CSS selectors" (Helpers) module +$sidebar-one-visible: 'body.one-sidebar'; +$block-inside-region: '.block--region'; -$theme-colors: ( - 'primary': $slate, +// Enable the CSS variables +@forward '../../_sass-framework/options/enable/css' with ( + $css-variables: true, ); -// Fonts -// ==================================================================================================== -// Font settings. - -// Default (Muli/Open Sans) font families. -$font-family-muli: 'Muli', sans-serif; -$font-family-open-sans: 'Open Sans', sans-serif; - -// Body -// ==================================================================================================== -// Overridden settings for the `` element. - -$body-base-color: $gray-700; -$body-base-background-color: $gray-100; -$body-base-font-family: $font-family-open-sans; -$body-base-line-height: 1.8; - -// System -// ==================================================================================================== -// Define all CSS selectors for "System" (module) components. +// Update the "CSS selectors" map with the custom selector strings +@forward '../../_sass-framework/helpers/css/selectors' with ( + $selectors: ( + // System + 'sidebar-visible': 'body.sidebar', + 'sidebar-not-visible': 'body.no-sidebars', + 'sidebar-one-visible': $sidebar-one-visible, + 'sidebar-both-visible': 'body.two-sidebars', + 'sidebar-navigation-visible': '#{$sidebar-one-visible}.is-visible--navigation', + 'sidebar-complementary-visible': '#{$sidebar-one-visible}.is-visible--complementary', + // Blocks + 'region-header': '#{$block-inside-region}-header', + 'region-header-collapsible': '#{$block-inside-region}-header-collapsible', + 'region-footer': '#{$block-inside-region}-footer', + ), +); -$pages: '.page'; -$page-front: 'body#{$pages}--frontpage'; +// Override "Form" (Elements) module variables +@forward '../../_sass-framework/elements/form/forms' with ( + $form-element-enable-shadows: true, +);