{"version":3,"sources":["debug.scss","01-tools/_typography.scss"],"names":[],"mappings":"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","file":"debug.css","sourcesContent":["////\n/// @group debug\n/// @access private\n////\n/*\n  DEBUG.CSS\n\n  Consumers of Gravity can include this CSS file in debug builds to\n  visually highlight issues that need fixing, such as:\n\n  * Incorrect use of Gravity classes & components\n  * Undesirable HTML (e.g. a11y issues)\n\n  Note that this approach cannot exhaustively test all potential issues\n  in your UI code. It is intended to *complement* other linting and testing\n  techniques. It goes without saying that production builds should generally\n  NOT use this file.\n\n  This approach was inspired by:\n  * Eric Meyer's Diagnostic CSS - https://meyerweb.com/eric/tools/css/diagnostics/\n  * \"CSS Diagnostics\" on CSS Tricks - https://css-tricks.com/snippets/css/css-diagnostics/\n  * Karl Groves' Diagnosic CSS - http://www.karlgroves.com/2013/09/07/diagnostic-css-super-quick-web-accessibility-testing/\n*/\n\n@import './00-settings/settings.all';\n@import './01-tools/tools.all';\n\n// ====================================================================\n// Mixins for highlighting offending items on the page\n// ====================================================================\n\n/* stylelint-disable scss/at-mixin-pattern */\n\n/// Adds a colored outline around an element.\n///\n/// Optionally, if a message is provided it will be displayed in\n/// the top left corner of the element. Note, that this will set\n/// the element's position property to \"relative\"!\n///\n/// @param {string} $accent-color-name - One of the `accent-*` color purpose names.\n/// @param {string} $message - The error or warning message to display to the user.\n@mixin highlight($accent-color-name, $message) {\n  $outline-color: var(#{grav-color-css-prop-name('b', $accent-color-name)});\n  $text-color: var(#{grav-color-css-prop-name('a', $accent-color-name)});\n\n  outline: grav-px2rem(3) solid $outline-color;\n\n  @if type-of($message) == string and  str-length($message) > 0 {\n    position: relative;\n\n    &::after {\n      @include grav-font-size(-1);\n\n      content: $message;\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      padding: 0.3rem;\n      background-color: $outline-color;\n      border-radius: 0 0 0.5rem;\n      color: $text-color;\n      font-weight: bold;\n      line-height: 1;\n    }\n  }\n}\n\n/// Highlights elements with errors in danger accent color\n///\n/// @param {string} $message [''] - The error message to display to the user.\n@mixin highlight-error($message: '') {\n  @include highlight('accent-danger', $message);\n}\n\n/// Highlights elements with warnings in attention accent color\n///\n/// @param {string} $message [''] - The warning message to display to the user.\n@mixin highlight-warning($message: '') {\n  @include highlight('accent-attention', $message);\n}\n\n/// Generates CSS to display a warning message for classes that have\n/// been deprecated and will eventually be removed from Gravity.\n///\n/// @param {string} $class - The CSS class selector\n/// @param {string} $version-to-be-removed - (Optional) The Gravity UI Web version in which the class will be removed.\n/// @param {string} $migration-message - Optional migration instructions.\n@mixin deprecated-class($class, $version-to-be-removed: false, $migration-message: false) {\n  $message: '#{$class} has been deprecated';\n\n  @if $version-to-be-removed {\n    // Append message with version to be removed\n    $message: '#{$message} and is due to be removed in v#{$version-to-be-removed}';\n  }\n\n  // End the sentence\n  $message: '#{$message}.';\n\n  @if $migration-message {\n    // Append migration message\n    $message: '#{$message} #{$migration-message}';\n  }\n\n  #{$class} {\n    @include highlight-warning($message);\n  }\n}\n\n/// Generates CSS to display an error message for classes that have\n/// been removed from Gravity.\n///\n/// @param {string} $class - The CSS class selector\n/// @param {string} $version-removed - The Gravity UI Web version in which the class was removed.\n/// @param {string} $migration-message - Optional migration instructions.\n@mixin removed-class($class, $version-removed, $migration-message: false) {\n  $message: '#{$class} was removed in v#{$version-removed}.';\n\n  @if $migration-message {\n    // Append migration message\n    $message: '#{$message} #{$migration-message}';\n  }\n\n  #{$class} {\n    @include highlight-error($message);\n  }\n}\n\n\n/* stylelint-enable scss/at-mixin-pattern */\n\n// ====================================================================\n// Tests for misuse of Gravity's styles, classes and components\n// ====================================================================\n\n.grav-o-full-bleed__content .grav-o-full-bleed__content {\n  @include highlight-error('Nesting of .grav-o-full-bleed__content is not allowed.');\n}\n\nbody meta:first-child,\nbody link:first-child,\nbody script:first-child,\nbody style:first-child,\n[hidden]:first-child {\n  @include highlight-warning('Invisible first child may cause following visible element to have unwanted top margin.');\n\n  // Make element visible, so that we can show error\n  display: block;\n  height: 0;\n  padding: 0;\n  font-size: 0;\n  line-height: 0;\n}\n\n// ====================================================================\n// Tests for generic HTML & CSS naughtiness\n//\n// (We do not need to add things that the w3c validator catches - for\n// example missing alt attributes, deprecated elements, etc. - in here)\n// ====================================================================\n\n// TBC...\n\n\n// ====================================================================\n// Flag deprecated Gravity classes and components\n// ====================================================================\n\n// Add warnings here as needed...\n// @include deprecated-class( ... );\n\n\n// ====================================================================\n// Flag removed Gravity classes and components\n// ====================================================================\n\n// Things removed in gravity-ui-web v3\n@include removed-class('.grav-o-container', 3, 'Use .grav-o-full-bleed__content instead.');\n@include removed-class('.grav-o-container-banner', 3, 'Consider applying a color scheme instead (.grav-u-color-scheme-*).');\n@include removed-class('.grav-o-section', 3);\n@include removed-class('.grav-c-two-columns-text', 3);\n@include removed-class('.grav-c-logo-image', 3);\n@include removed-class('.grav-c-job-list', 3, 'A similar layout can be achieved with .grav-o-two-column.');\n@include removed-class('.grav-c-list-image-links', 3, 'Consider using .grav-c-list-inline-row instead.');\n@include removed-class('.grav-c-list-img-cards', 3, 'Consider using .grav-c-list-cards-basic or .grav-o-two-column instead.');\n@include removed-class('.grav-c-two-columns-block', 3, 'Please use .grav-o-two-column instead.');\n@include removed-class('.grav-o-column-list', 3, 'Please use .grav-o-reset-list instead.');\n@include removed-class('.grav-c-icon__secondary-elements', 3, 'Consider using one of the --grav-co-svg-hl-1/2/3 custom properties to achieve a similar effect.');\n@include removed-class('.grav-c-logo', 3, 'For logotype, use .grav-c-logotype instead. For other uses this class is now redundant as inline SVG elements now get a default fill color.');\n","////\n/// Typography-related functions and mixins\n///\n/// @group typography\n////\n\n// ---- Private helpers -----\n\n/// Returns a given typeface's map\n///\n/// @param {string} $name - One of the typeface names defined\n///             in the `$grav-typefaces` map.\n/// @return {map} A map of the typeface's details.\n///\n/// @access private\n@function grav-typeface($name) {\n  @if (not map-has-key($grav-typefaces, $name)) {\n    @error ('Typeface with name \"#{$name}\" not found');\n  }\n\n  @return map-get($grav-typefaces, $name);\n}\n\n/// Returns the CSS `font-weight` value for a given typeface and weight.\n///\n/// @param {string} $name - One of the typeface names defined\n///             in the `$grav-typefaces` map.\n/// @param {string} $weight - One of the typeface's weight names.\n/// @return {string} The typeface's CSS `font-weight`.\n///\n/// @access private\n@function grav-font-weight($name, $weight) {\n  $typeface: grav-typeface($name);\n\n  @if (not map-has-key($typeface, 'weights')) {\n    @error ('Typeface \"#{$name}\" has no weights defined');\n  }\n\n  $weights: map-get($typeface, 'weights');\n\n  @if (not map-has-key($weights, $weight)) {\n    @error ('Typeface \"#{$name}\" has no weight called \"#{$weight}\".');\n  }\n\n  @return map-get($weights, $weight);\n}\n\n/// Returns font-size CSS custom property name suffix for\n/// a given point on our modular scale.\n///\n/// @param {number} $scale - A point on Gravity's typographic scale.\n/// @return {string} The corresponding CSS custom property name suffix.\n///\n/// @access private\n@function grav-font-size-varname-suffix($scale) {\n  @if ($scale < $grav-scale-min) or ($scale > $grav-scale-max) {\n    @error '#{$scale} is not a valid point on Gravity\\'s typographic scale. Values must be in the range from #{$grav-scale-min} to #{$grav-scale-max}.';\n  }\n\n  @if $scale < 0 {\n    @return 'minus-#{abs($scale)}';\n  }\n\n  @else if $scale>0 {\n    @return 'plus-#{$scale}';\n  }\n\n  @else {\n    // No need to use the mixin, this will always be\n    // 1rem\n    // --grav-fs-base: 1rem;\n    @return 'base';\n  }\n}\n\n\n// ---- Public API -----\n\n/// Returns the CSS `font-family` stack for the given typeface.\n///\n/// Intended to be used when setting `font-family` in your CSS code.\n///\n/// @param {string} $name - One of Gravity's typeface names. Supported\n///             values are: `primary` and `mono`.\n/// @return {list} The typeface's CSS font stack.\n@function grav-font-family-stack($name) {\n  $typeface: grav-typeface($name);\n\n  @if (not map-has-key($typeface, 'stack')) {\n    @error ('Typeface \"#{$name}\" has no font stack defined');\n  }\n\n  @return map-get($typeface, 'stack');\n}\n\n/// Returns the full `font-size` CSS property name for\n/// a given point on our modular scale.\n///\n/// @param {number} $scale - A point on Gravity's typographic scale.\n/// @return {string} The corresponding CSS custom property name.\n@function grav-font-size-css-propname($scale) {\n  @return --grav-fs-#{grav-font-size-varname-suffix($scale)};\n}\n\n\n/// Mixin for setting the font-size at a given point\n/// on our modular scale.\n///\n/// @param {number} $scale - A point on Gravity's typographic scale.\n@mixin grav-font-size($scale) {\n  font-size: var(#{grav-font-size-css-propname($scale)});\n}\n"]}