/** * Redefine Sass map values for child theme output. * - See: style-child-theme.scss */ /** * Global */ // Vertical Rhythm Multiplier $baseline-unit: 8px; $typescale-root: 20px; // Set 16px/1em default on html $typescale-base: 1rem; // Set 1em default on body == $typescale-root; $typescale-ratio: 1.2; // Run ratio math on 1em == $typescale-base * $typescale-root; $config-global: ( /* Fonts */ "font": ( /* Font Family */ "family": ( "primary": ( "fallback": "\"Roboto Condensed\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif", "css-var": '--font-headings', ), "secondary": ( "fallback": "Roboto\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif", "css-var": '--font-base', ), "code": "monospace, monospace", "ui": ( "fallback": "Roboto\, -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.6, "heading": 1.125, ), ), /* Colors */ "color": ( "primary": ( "default": #19744C, "hover": darken(#19744C, 5%), ), "secondary": ( "default": #BC2213, "hover": darken(#BC2213, 5%), ), "foreground": ( "default": #303030, "light": #505050, // must be accessible against background "dark": #101010, // must be accessible against background ), "background": ( "default": #FFFFFF, "light": #F0F0F0, // must be accessible against foreground-default "dark": #D0D0D0, // must be accessible against foreground-default ), "border": ( "default": #D0D0D0, "light": #F0F0F0, "dark": #B0B0B0, ), "alert": ( "success": #19744C, "info": #3e8bff, "warning": #e8a600, "error": #d20000, ), "text-selection": lighten(#19744C, 60%), "black": black, "white": white, ), /* 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 * $baseline-unit), "md": (0.75 * $baseline-unit), "lg": $baseline-unit, "pill": (10 * $baseline-unit), ), ); /** * 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", "sm"), "size": map-deep-get($config-global, "font", "size", "sm"), "weight": bold, ), // Borders "border": ( "width": 1px, "radius": map-deep-get($config-global, "border-radius", "sm"), ), "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": 700, "line-height": 1, ), // Borders "border-radius": map-deep-get($config-global, "border-radius", "sm"), "border-width": 2px, // Padding "padding": ( "vertical": map-deep-get($config-global, "spacing", "unit"), "horizontal": map-deep-get($config-global, "spacing", "unit"), ), ); /** * Cover */ $config-cover: ( "height": #{18 * map-deep-get($config-global, "spacing", "vertical")}, "color": ( "foreground": #{map-deep-get($config-global, "color", "white")}, "background": #{map-deep-get($config-global, "color", "black")}, ) ); /** * 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": 700, ), ); /** * 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.25 * $baseline-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", "foreground", "default"), "link-hover": map-deep-get($config-global, "color", "primary", "default"), ), // 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", "lg"), "weight": 700, "line-height": 1, ), ), // Fonts & Typography "description": ( // 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"), ), ), ), "main-nav": ( // Colors "color": ( "text": map-deep-get($config-global, "color", "foreground", "default"), "link": map-deep-get($config-global, "color", "foreground", "default"), "link-hover": map-deep-get($config-global, "color", "primary", "default"), ), // 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", "base"), "weight": 400, "line-height": 1, ), "link-padding": map-deep-get($config-global, "spacing", "unit"), ), "social-nav": ( // Colors "color": ( "link": map-deep-get($config-global, "color", "foreground", "default"), "link-hover": map-deep-get($config-global, "color", "primary", "default"), ), "link-padding": #{0.5 * map-deep-get($config-global, "spacing", "unit")}, ), ); /** * Footer */ $config-footer: ( // Colors "color": ( "text": map-deep-get($config-global, "color", "foreground", "default"), "link": map-deep-get($config-global, "color", "foreground", "default"), "link-hover": map-deep-get($config-global, "color", "primary", "default"), ), // 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"), ), );