405 lines
11 KiB
SCSS
405 lines
11 KiB
SCSS
/**
|
|
* Redefine Sass map values for child theme output.
|
|
* - See: style-child-theme.scss
|
|
*/
|
|
|
|
/**
|
|
* Global
|
|
*/
|
|
|
|
// Vertical Rhythm Multiplier
|
|
$baseline-unit: 8px;
|
|
|
|
$typescale-root: 17px; // Set 16px/1em default on html
|
|
$typescale-base: 1rem; // Set 1em default on body == $typescale-root;
|
|
$typescale-ratio: 1.200; // Run ratio math on 1em == $typescale-base * $typescale-root;
|
|
|
|
$config-global: (
|
|
|
|
/* Fonts */
|
|
"font": (
|
|
/* Font Family */
|
|
"family": (
|
|
"primary": (
|
|
"fallback": "\"EB Garamond\", serif",
|
|
"css-var": '--font-headings',
|
|
),
|
|
"secondary": (
|
|
"fallback": "\"Work Sans\", sans-serif",
|
|
"css-var": '--font-base',
|
|
),
|
|
"code": "monospace, monospace",
|
|
"ui": (
|
|
"fallback": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
|
|
"css-var": '--font-base',
|
|
),
|
|
),
|
|
/* Font Size */
|
|
"size": (
|
|
"root": $typescale-root,
|
|
"ratio": $typescale-ratio,
|
|
"xs": ($typescale-base / $typescale-ratio / $typescale-ratio),
|
|
"sm": ($typescale-base / $typescale-ratio),
|
|
"base": $typescale-base,
|
|
"md": ($typescale-base * $typescale-ratio),
|
|
"lg": ($typescale-base * $typescale-ratio * $typescale-ratio),
|
|
"xl": ($typescale-base * $typescale-ratio * $typescale-ratio * $typescale-ratio),
|
|
"xxl": ($typescale-base * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio),
|
|
"xxxl": ($typescale-base * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio),
|
|
"xxxxl": ($typescale-base * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio),
|
|
),
|
|
/* Letter Spacing */
|
|
"letter-spacing": (
|
|
"base": normal,
|
|
"xs": normal,
|
|
"sm": normal,
|
|
"md": normal,
|
|
"lg": normal,
|
|
"xl": normal,
|
|
"xxl": normal,
|
|
"xxxl": normal,
|
|
),
|
|
/* Line Height */
|
|
"line-height": (
|
|
"base": strip-unit($typescale-base),
|
|
"body": 1.78,
|
|
"heading": 1,
|
|
),
|
|
),
|
|
|
|
/* Colors */
|
|
"color": (
|
|
"primary": (
|
|
"default": #000000,
|
|
"hover": #FF7A5C,
|
|
),
|
|
"secondary": (
|
|
"default": #FF7A5C,
|
|
"hover": #8B0000,
|
|
),
|
|
"foreground": (
|
|
"default": #444444,
|
|
"light": #767676, // must be accessible against background
|
|
"dark": #111111, // must be accessible against background
|
|
),
|
|
"background": (
|
|
"default": #FFFFFF,
|
|
"light": #FAFAFA, // must be accessible against foreground-default
|
|
"dark": #DDDDDD, // must be accessible against foreground-default
|
|
),
|
|
"border": (
|
|
"default": #DDDDDD,
|
|
"light": #FAFAFA,
|
|
"dark": #AAAAAA,
|
|
),
|
|
"alert": (
|
|
"success": #109c15,
|
|
"info": #5cacff,
|
|
"warning": #ffcf49,
|
|
"error": #FF7A5C,
|
|
),
|
|
"text-selection": #add8e6,
|
|
"black": #000000,
|
|
"white": #FFFFFF,
|
|
),
|
|
|
|
/* Spacing */
|
|
"spacing": (
|
|
"unit": (2 * $baseline-unit), // 16px
|
|
"measure": unset, // Use ch units here. ie: 60ch = 60 character max-width
|
|
"horizontal": (2 * $baseline-unit), // 16px
|
|
"vertical": (4 * $baseline-unit), // 32px matches default spacing in the editor.
|
|
),
|
|
|
|
/* Breakpoints */
|
|
"breakpoint": (
|
|
"sm": 560px,
|
|
"md": 640px,
|
|
"lg": 782px,
|
|
"xl": 1024px,
|
|
"xxl": 1280px,
|
|
),
|
|
|
|
/* Elevation */
|
|
"elevation": (
|
|
"none": 0px 0px 0px 0px rgba( 0, 0, 0, 0 ),
|
|
"2dp": 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ),
|
|
"4dp": 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ),
|
|
"6dp": 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ),
|
|
"8dp": 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ),
|
|
"10dp": 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ),
|
|
),
|
|
|
|
/* Border radius */
|
|
"border-radius": (
|
|
"sm": (0.5 * $typescale-root),
|
|
"md": (0.75 * $typescale-root),
|
|
"lg": $typescale-root,
|
|
"pill": (10 * $typescale-root),
|
|
),
|
|
);
|
|
|
|
/**
|
|
* Elements
|
|
*/
|
|
$config-elements: (
|
|
|
|
"form": (
|
|
|
|
// Colors
|
|
"color": (
|
|
"text": map-deep-get($config-global, "color", "black"),
|
|
"border": map-deep-get($config-global, "color", "border", "default"),
|
|
"border-focus": map-deep-get($config-global, "color", "primary", "hover"),
|
|
),
|
|
|
|
// Fonts
|
|
"font": (
|
|
"family": (
|
|
"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
|
|
"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
|
|
),
|
|
"line-height": map-deep-get($config-global, "font", "line-height", "md"),
|
|
"size": map-deep-get($config-global, "font", "size", "md"),
|
|
"weight": bold,
|
|
),
|
|
|
|
// Borders
|
|
"border": (
|
|
"width": 1px,
|
|
"radius": 3px,
|
|
),
|
|
|
|
"padding": #{map-deep-get($config-global, "spacing", "unit")},
|
|
),
|
|
);
|
|
|
|
/**
|
|
* Button
|
|
*/
|
|
$config-button: (
|
|
// Colors
|
|
"color": (
|
|
"text": map-deep-get($config-global, "color", "background", "default"),
|
|
"text-hover": map-deep-get($config-global, "color", "background", "default"),
|
|
"background": map-deep-get($config-global, "color", "primary", "default"),
|
|
"background-hover": map-deep-get($config-global, "color", "primary", "hover"),
|
|
),
|
|
// Fonts
|
|
"font": (
|
|
"family": (
|
|
"fallback": map-deep-get($config-global, "font", "family", "ui", "fallback"),
|
|
"css-var": map-deep-get($config-global, "font", "family", "ui", "css-var"),
|
|
),
|
|
"size": map-deep-get($config-global, "font", "size", "sm"),
|
|
"weight": 600,
|
|
"line-height": 1,
|
|
),
|
|
// Borders
|
|
"border-radius": map-deep-get($config-global, "border-radius", "xs"),
|
|
"border-width": 2px,
|
|
// Padding
|
|
"padding": (
|
|
"vertical": (0.725 * map-deep-get($config-global, "spacing", "unit")),
|
|
"horizontal": (0.725 * map-deep-get($config-global, "spacing", "unit")),
|
|
),
|
|
);
|
|
|
|
/**
|
|
* Cover
|
|
*/
|
|
$config-cover: (
|
|
"height": #{15 * map-deep-get($config-global, "spacing", "vertical")},
|
|
"color": (
|
|
"foreground": #{map-deep-get($config-global, "color", "background", "default")},
|
|
"background": #{map-deep-get($config-global, "color", "foreground", "default")},
|
|
)
|
|
);
|
|
|
|
/**
|
|
* Heading
|
|
*/
|
|
$config-heading: (
|
|
// Fonts & Typography
|
|
"font": (
|
|
// Family
|
|
"family": (
|
|
"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
|
|
"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
|
|
),
|
|
// Size
|
|
"size": (
|
|
"h6": map-deep-get($config-global, "font", "size", "md"),
|
|
"h5": map-deep-get($config-global, "font", "size", "lg"),
|
|
"h4": map-deep-get($config-global, "font", "size", "xl"),
|
|
"h3": map-deep-get($config-global, "font", "size", "xxl"),
|
|
"h2": map-deep-get($config-global, "font", "size", "xxxl"),
|
|
"h1": map-deep-get($config-global, "font", "size", "xxxxl"),
|
|
),
|
|
// Letter spacing
|
|
"line-height": (
|
|
"h6": map-deep-get($config-global, "font", "line-height", "heading"),
|
|
"h5": map-deep-get($config-global, "font", "line-height", "heading"),
|
|
"h4": map-deep-get($config-global, "font", "line-height", "heading"),
|
|
"h3": map-deep-get($config-global, "font", "line-height", "heading"),
|
|
"h2": map-deep-get($config-global, "font", "line-height", "heading"),
|
|
"h1": map-deep-get($config-global, "font", "line-height", "heading"),
|
|
),
|
|
// Letter spacing
|
|
"letter-spacing": (
|
|
"h6": map-deep-get($config-global, "font", "letter-spacing", "sm"),
|
|
"h5": map-deep-get($config-global, "font", "letter-spacing", "md"),
|
|
"h4": map-deep-get($config-global, "font", "letter-spacing", "lg"),
|
|
"h3": map-deep-get($config-global, "font", "letter-spacing", "xl"),
|
|
"h2": map-deep-get($config-global, "font", "letter-spacing", "xxl"),
|
|
"h1": map-deep-get($config-global, "font", "letter-spacing", "xxxl"),
|
|
),
|
|
// Font Weight
|
|
"weight": 400,
|
|
),
|
|
);
|
|
|
|
/**
|
|
* List
|
|
*/
|
|
$config-list: (
|
|
// Fonts
|
|
"font": (
|
|
"family": (
|
|
"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
|
|
"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
|
|
),
|
|
),
|
|
);
|
|
|
|
/**
|
|
* Pullquote
|
|
*/
|
|
$config-pullquote: (
|
|
// Font
|
|
"font": (
|
|
"family": (
|
|
"fallback": map-deep-get($config-heading, "font", "family", "fallback"),
|
|
"css-var": map-deep-get($config-heading, "font", "family", "css-var"),
|
|
),
|
|
),
|
|
// Border
|
|
"color": (
|
|
"border": #{map-deep-get($config-global, "color", "border", "default")},
|
|
"background": #{map-deep-get($config-global, "color", "primary", "default")},
|
|
),
|
|
// Border
|
|
"border": (
|
|
"width": #{0.5 * $baseline-unit},
|
|
),
|
|
);
|
|
|
|
/**
|
|
* Quote
|
|
*/
|
|
$config-quote: (
|
|
// Font
|
|
"font": (
|
|
"family": (
|
|
"fallback": map-deep-get($config-heading, "font", "family", "fallback"),
|
|
"css-var": map-deep-get($config-heading, "font", "family", "css-var"),
|
|
),
|
|
),
|
|
);
|
|
|
|
/**
|
|
* Separator
|
|
*/
|
|
|
|
$config-separator: (
|
|
"height": #{0.125 * map-deep-get($config-global, "spacing", "unit")},
|
|
"width": #{6 * map-deep-get($config-global, "spacing", "horizontal")}
|
|
);
|
|
|
|
/**
|
|
* Header
|
|
*/
|
|
$config-header: (
|
|
"branding": (
|
|
// Colors
|
|
"color": (
|
|
"text": map-deep-get($config-global, "color", "foreground", "light"),
|
|
"link": map-deep-get($config-global, "color", "primary", "default"),
|
|
"link-hover": map-deep-get($config-global, "color", "primary", "hover"),
|
|
),
|
|
// Fonts & Typography
|
|
"title": (
|
|
// Fonts
|
|
"font": (
|
|
"family": (
|
|
"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
|
|
"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
|
|
),
|
|
"size": map-deep-get($config-global, "font", "size", "xxxl"),
|
|
"weight": normal,
|
|
"line-height": 1,
|
|
),
|
|
),
|
|
// Fonts & Typography
|
|
"description": (
|
|
// Fonts
|
|
"font": (
|
|
"family": (
|
|
"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
|
|
"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
|
|
),
|
|
"size": map-deep-get($config-global, "font", "size", "xxxl"),
|
|
),
|
|
),
|
|
),
|
|
|
|
"main-nav": (
|
|
// Colors
|
|
"color": (
|
|
"text": map-deep-get($config-global, "color", "foreground", "default"),
|
|
"link": map-deep-get($config-global, "color", "primary", "default"),
|
|
"link-hover": map-deep-get($config-global, "color", "primary", "hover"),
|
|
),
|
|
// Fonts
|
|
"font": (
|
|
"family": (
|
|
"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
|
|
"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
|
|
),
|
|
"size": map-deep-get($config-global, "font", "size", "sm"),
|
|
"weight": 600,
|
|
"line-height": 1,
|
|
),
|
|
"link-padding": 10px,
|
|
),
|
|
|
|
"social-nav": (
|
|
// Colors
|
|
"color": (
|
|
"link": map-deep-get($config-global, "color", "primary", "default"),
|
|
"link-hover": map-deep-get($config-global, "color", "primary", "hover"),
|
|
),
|
|
"link-padding": calc( 0.5 * calc(0.66 * #{map-deep-get($config-global, "spacing", "unit")} ) ),
|
|
),
|
|
);
|
|
|
|
/**
|
|
* Footer
|
|
*/
|
|
$config-footer: (
|
|
// Colors
|
|
"color": (
|
|
"text": map-deep-get($config-global, "color", "foreground", "light"),
|
|
"link": map-deep-get($config-global, "color", "primary", "default"),
|
|
"link-hover": map-deep-get($config-global, "color", "primary", "hover"),
|
|
),
|
|
// Fonts
|
|
"font": (
|
|
"family": (
|
|
"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
|
|
"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
|
|
),
|
|
"size": map-deep-get($config-global, "font", "size", "sm"),
|
|
"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
|
|
),
|
|
);
|