@graupl/graupl 1.0.0-beta.23 → 1.0.0-beta.24

package/dist/css/utilities/border.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../../node_modules/@graupl/core/src/scss/mixins/_utility.scss","border.css"],"names":[],"mappings":"AASI,wBCiJA,UAnIE,mUAAA,CAAA,4RAAA,CAAA,oSCjBJ,CDoJE,eAnIE,yhBAAA,CAAA,udAAA,CAAA,+dCVJ,CD6IE,cAnIE,4BCPJ,CD0IE,aAnIE,2BCJJ,CDuIE,eAnIE,6BCDJ,CDoIE,aAnIE,2BCEJ,CDiIE,cAnIE,4BCKJ,CD8HE,eAnIE,6BCQJ,CD2HE,eAnIE,6BCWJ,CDwHE,eAnIE,6BCcJ,CDqHE,eAnIE,6BCiBJ,CDkHE,cAnIE,4BCoBJ,CD+GE,cAnIE,4BCuBJ,CD4GE,eAnIE,6BC0BJ,CDyGE,aAnIE,2BC6BJ,CDsGE,oBAnIE,kCCgCJ,CDmGE,gBAnIE,4HCmCJ,CDgGE,oBAnIE,0ICsCJ,CD6FE,oBAnIE,0ICyCJ,CD0FE,oBAnIE,0IC4CJ,CDuFE,oBAnIE,0IC+CJ,CDoFE,oBAnIE,0ICkDJ,CDiFE,oBAnIE,0ICqDJ,CD8EE,oBAnIE,0ICwDJ,CD2EE,oBAnIE,0IC2DJ,CDwEE,oBAnIE,0IC8DJ,CDqEE,kBAnIE,kICiEJ,CDkEE,sBAnIE,gJCoEJ,CD+DE,sBAnIE,gJCuEJ,CD4DE,sBAnIE,gJC0EJ,CDyDE,sBAnIE,gJC6EJ,CDsDE,sBAnIE,gJCgFJ,CDmDE,sBAnIE,gJCmFJ,CDgDE,sBAnIE,gJCsFJ,CD6CE,sBAnIE,gJCyFJ,CD0CE,sBAnIE,gJC4FJ,CDuCE,iBAnIE,4HC+FJ,CDoCE,qBAnIE,6ICkGJ,CDiCE,qBAnIE,6ICqGJ,CD8BE,qBAnIE,6ICwGJ,CD2BE,qBAnIE,6IC2GJ,CDwBE,qBAnIE,0IC8GJ,CDqBE,qBAnIE,6ICiHJ,CDkBE,qBAnIE,6ICoHJ,CDeE,qBAnIE,6ICuHJ,CDYE,qBAnIE,6IC0HJ,CACF","file":"border.css"}
+{"version":3,"sourceRoot":null,"mappings":"AESI,wBCiJA,u4BAAA,w9CAAA,2CAAA,yCAAA,6CAAA,yCAAA,2CAAA,6CAAA,6CAAA,6CAAA,6CAAA,2CAAA,2CAAA,6CAAA,yCAAA,iDAAA,6IAAA,+JAAA,+JAAA,+JAAA,+JAAA,+JAAA,+JAAA,+JAAA,+JAAA,+JAAA,qJAAA,uKAAA,uKAAA,uKAAA,uKAAA,uKAAA,uKAAA,uKAAA,uKAAA,uKAAA,8IAAA,mKAAA,mKAAA,mKAAA,mKAAA,gKAAA,mKAAA,mKAAA,mKAAA","sources":["dist/css/utilities/border.css","var/www/html/node_modules/@graupl/core/src/scss/theme/typography/_defaults.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_utility.scss","var/www/html/node_modules/@graupl/core/src/scss/utilities/border/_index.scss"],"sourcesContent":["/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n@layer graupl.utilities {\n  .bordered {\n    border-width: var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem)) var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem)) var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem)) var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem)) !important;\n    border-radius: var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem)) var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem)) var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem)) var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem)) !important;\n    border-style: var(--graupl-border-top-style, var(--graupl-border-style, solid)) var(--graupl-border-right-style, var(--graupl-border-style, solid)) var(--graupl-border-bottom-style, var(--graupl-border-style, solid)) var(--graupl-border-left-style, var(--graupl-border-style, solid)) !important;\n  }\n  /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n  /* stylelint-enable  scss/operator-no-newline-after */\n  table.bordered {\n    border-width: var(--graupl-table-border-width, var(--graupl-table-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-table-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-table-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-table-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem)))) !important;\n    border-radius: var(--graupl-table-border-radius, var(--graupl-table-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-table-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-table-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-table-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem)))) !important;\n    border-style: var(--graupl-table-border-style, var(--graupl-table-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-table-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-table-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-table-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid)))) !important;\n  }\n  .border-thick {\n    border-width: thick !important;\n  }\n  .border-thin {\n    border-width: thin !important;\n  }\n  .border-medium {\n    border-width: medium !important;\n  }\n  .border-none {\n    border-width: none !important;\n  }\n  .border-solid {\n    border-style: solid !important;\n  }\n  .border-dashed {\n    border-style: dashed !important;\n  }\n  .border-dotted {\n    border-style: dotted !important;\n  }\n  .border-double {\n    border-style: double !important;\n  }\n  .border-groove {\n    border-style: groove !important;\n  }\n  .border-ridge {\n    border-style: ridge !important;\n  }\n  .border-inset {\n    border-style: inset !important;\n  }\n  .border-outset {\n    border-style: outset !important;\n  }\n  .border-none {\n    border-style: none !important;\n  }\n  .border-transparent {\n    border-color: transparent !important;\n  }\n  .border-primary {\n    border-color: var(--graupl-theme-active--primary, var(--graupl-theme--light--primary, var(--graupl-primary, hsl(219, 75%, 50%)))) !important;\n  }\n  .border-primary-100 {\n    border-color: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))) !important;\n  }\n  .border-primary-200 {\n    border-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))) !important;\n  }\n  .border-primary-300 {\n    border-color: var(--graupl-theme-active--primary--300, var(--graupl-theme-light--primary--300, var(--graupl-primary--300, hsl(219, 80%, 65%)))) !important;\n  }\n  .border-primary-400 {\n    border-color: var(--graupl-theme-active--primary--400, var(--graupl-theme-light--primary--400, var(--graupl-primary--400, hsl(219, 75%, 55%)))) !important;\n  }\n  .border-primary-500 {\n    border-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%)))) !important;\n  }\n  .border-primary-600 {\n    border-color: var(--graupl-theme-active--primary--600, var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%)))) !important;\n  }\n  .border-primary-700 {\n    border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))) !important;\n  }\n  .border-primary-800 {\n    border-color: var(--graupl-theme-active--primary--800, var(--graupl-theme-light--primary--800, var(--graupl-primary--800, hsl(219, 90%, 20%)))) !important;\n  }\n  .border-primary-900 {\n    border-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))) !important;\n  }\n  .border-secondary {\n    border-color: var(--graupl-theme-active--secondary, var(--graupl-theme--light--secondary, var(--graupl-secondary, hsl(235, 15%, 50%)))) !important;\n  }\n  .border-secondary-100 {\n    border-color: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%)))) !important;\n  }\n  .border-secondary-200 {\n    border-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))) !important;\n  }\n  .border-secondary-300 {\n    border-color: var(--graupl-theme-active--secondary--300, var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%)))) !important;\n  }\n  .border-secondary-400 {\n    border-color: var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)))) !important;\n  }\n  .border-secondary-500 {\n    border-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)))) !important;\n  }\n  .border-secondary-600 {\n    border-color: var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%)))) !important;\n  }\n  .border-secondary-700 {\n    border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%)))) !important;\n  }\n  .border-secondary-800 {\n    border-color: var(--graupl-theme-active--secondary--800, var(--graupl-theme-light--secondary--800, var(--graupl-secondary--800, hsl(235, 30%, 20%)))) !important;\n  }\n  .border-secondary-900 {\n    border-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%)))) !important;\n  }\n  .border-tertiary {\n    border-color: var(--graupl-theme-active--tertiary, var(--graupl-theme--light--tertiary, var(--graupl-tertiary, hsl(340, 60%, 50%)))) !important;\n  }\n  .border-tertiary-100 {\n    border-color: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%)))) !important;\n  }\n  .border-tertiary-200 {\n    border-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%)))) !important;\n  }\n  .border-tertiary-300 {\n    border-color: var(--graupl-theme-active--tertiary--300, var(--graupl-theme-light--tertiary--300, var(--graupl-tertiary--300, hsl(340, 65%, 65%)))) !important;\n  }\n  .border-tertiary-400 {\n    border-color: var(--graupl-theme-active--tertiary--400, var(--graupl-theme-light--tertiary--400, var(--graupl-tertiary--400, hsl(340, 60%, 55%)))) !important;\n  }\n  .border-tertiary-500 {\n    border-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%)))) !important;\n  }\n  .border-tertiary-600 {\n    border-color: var(--graupl-theme-active--tertiary--600, var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%)))) !important;\n  }\n  .border-tertiary-700 {\n    border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))) !important;\n  }\n  .border-tertiary-800 {\n    border-color: var(--graupl-theme-active--tertiary--800, var(--graupl-theme-light--tertiary--800, var(--graupl-tertiary--800, hsl(340, 75%, 20%)))) !important;\n  }\n  .border-tertiary-900 {\n    border-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%)))) !important;\n  }\n}","// @graupl/core typography theme default values.\n//\n// Generally, these should not be used directly when styling components unless a static value is needed.\n// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.\n//\n// They should not be used to define direct property values (i.e. font-size, color, etc.).\n// Those should be defined as custom properties in the `_variables.scss` file.\n\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n// font properties.\n$selector-base: root-defaults.$element-selector-base !default;\n$modifier-selector-base: root-defaults.$modifier-selector-base !default;\n$paragraph-selector-base: $selector-base !default;\n$paragraph-selector: \"p\";\n$small-selector-base: $selector-base !default;\n$small-selector: \"small\";\n$h1-selector-base: $selector-base !default;\n$h1-selector: \"h1\" !default;\n$h2-selector-base: $selector-base !default;\n$h2-selector: \"h2\" !default;\n$h3-selector-base: $selector-base !default;\n$h3-selector: \"h3\" !default;\n$h4-selector-base: $selector-base !default;\n$h4-selector: \"h4\" !default;\n$h5-selector-base: $selector-base !default;\n$h5-selector: \"h5\" !default;\n$h6-selector-base: $selector-base !default;\n$h6-selector: \"h6\" !default;\n$root-selector-base: \":\" !default;\n$root-selector: \"root\" !default;\n$bold-selector-base: $selector-base !default;\n$bold-selector: \"b\" !default;\n$strong-selector-base: $selector-base !default;\n$strong-selector: \"strong\" !default;\n$body-selector-base: $selector-base !default;\n$body-selector: \"body\" !default;\n$generate-base-font-sizes: root-defaults.$generate-base-font-sizes !default;\n$generate-base-font-weights: root-defaults.$generate-base-font-weights !default;\n$font-size-base: 1rem !default;\n$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;\n$line-height: 1.2em !default;\n\n// Multipliers for font sizes.\n// This uses a minor third scale.\n// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000\n$-font-size-multipliers: (\n  xs: 0.694,\n  sm: 0.833,\n  base: 1,\n  lg: 1.2,\n  xl: 1.44,\n  2xl: 1.728,\n  3xl: 2.074,\n  4xl: 2.488,\n  5xl: 2.986,\n);\n$font-size-multipliers: () !default;\n\n// Merge the font size multipliers with the default ones.\n@if $generate-base-font-sizes {\n  $font-size-multipliers: map.merge(\n    $-font-size-multipliers,\n    $font-size-multipliers\n  );\n}\n\n// Weights.\n$-font-weights: (\n  light: 300,\n  normal: 400,\n  bold: 700,\n);\n$font-weights: () !default;\n\n// Merge the custom font weights with the default ones.\n@if $generate-base-font-weights {\n  $font-weights: map.merge($-font-weights, $font-weights);\n}\n\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$root-font-family:\n  system-ui,\n  -apple-system,\n  blinkmacsystemfont,\n  \"Segoe UI\",\n  roboto,\n  \"Helvetica Neue\",\n  arial,\n  sans-serif !default;\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n  @if root-defaults.$use-layers {\n    @layer #{root-defaults.$id}.#{$layer} {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n","// @graupl/core utility mixins.\n//\n// Mixins to help generate utility classes.\n\n@use \"./screen\";\n@use \"./container\";\n@use \"./state\";\n@use \"./theme\";\n@use \"../functions/important\";\n@use \"../functions/utility\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:string\";\n\n/// Insert a map of properties and values into a utility class.\n///\n/// @param {Map} $map\n///   The map of properties and values to apply to the selector.\n/// @param {Boolean} $important\n///   A flag to determine if the important flag should be added.\n@mixin _insert($map, $important: null) {\n  @each $prop, $value in $map {\n    // Do not attempt to insert important values inside of custom properties.\n    @if string.slice($prop, 1, 2) != \"--\" {\n      #{$prop}: important.insert(#{$value}, $override: $important);\n    } @else {\n      #{$prop}: #{$value};\n    }\n  }\n\n  // Allow for custom overrides and additional styles.\n  @content;\n}\n\n/// Handles wrapping utilities with a conditional state.\n///\n/// @param {?string} $state\n///   The state to wrap.\n@mixin _handle-state($state: null) {\n  @if $state {\n    @include state.state($state) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n/// Handles wrapping utilities with a conditional screen.\n///\n/// @param {?string} $screen\n///   The screen to wrap.\n@mixin _handle-screen($screen: null) {\n  @if $screen {\n    @include screen.up($screen) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n/// Handles wrapping utilities with a conditional container.\n///\n/// @param {?string} $container\n///   The container to wrap.\n@mixin _handle-container($container: null) {\n  @if $container {\n    @include container.up($container) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n/// Handles wrapping utilities with a conditional theme.\n///\n/// @param {?string} $theme\n///   The theme mode to wrap.\n@mixin _handle-theme($theme: null) {\n  @if $theme {\n    @include theme.theme($theme) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n/// Create a utility class with a list of properties and a single value.\n///\n/// @param {string}      $selector\n///   The selector to apply the utility class to.\n/// @param {string|List} $property\n///   The property/properties to apply to the selector.\n/// @param {string}      $value\n///   The value to apply to the property/properties.\n/// @param {?Boolean}     $important\n///   A flag to determine if the important flag should be added.\n/// @param {?string}     $screen\n///   The screen to apply the utility class to.\n/// @param {?string}     $theme\n///   The theme mode to apply the utility class to.\n/// @param {?string}     $state\n///   The state to apply the utility class to.\n@mixin create(\n  $selector,\n  $property,\n  $value,\n  $important: null,\n  $screen: null,\n  $theme: null,\n  $state: null,\n  $container: null\n) {\n  $map: utility.convert-property-values-to-map($property, $value);\n\n  @include create-mapped(\n    $selector,\n    $map,\n    $important: $important,\n    $screen: $screen,\n    $theme: $theme,\n    $state: $state,\n    $container: $container\n  ) {\n    @content;\n  }\n}\n\n/// Create a utility class with a map of properties and values.\n///\n/// @param {string}  $selector\n///   The selector to apply the utility class to.\n/// @param {Map}     $map\n///   The map of properties and values to apply to the selector.\n/// @param {?Boolean} $important\n///   A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n///   The screen to apply the utility class to.\n/// @param {?string} $theme\n///   The theme mode to apply the utility class to.\n/// @param {?string} $state\n///   The state to apply the utility class to.\n@mixin create-mapped(\n  $selector,\n  $map,\n  $important: null,\n  $screen: null,\n  $theme: null,\n  $state: null,\n  $container: null\n) {\n  @include _handle-theme($theme) {\n    #{$selector} {\n      @if $screen or $container {\n        @if $screen {\n          @include _handle-screen($screen) {\n            @include _handle-state($state) {\n              @include _insert($map, $important) {\n                @content;\n              }\n            }\n          }\n        }\n\n        @if $container {\n          @include _handle-container($container) {\n            @include _handle-state($state) {\n              @include _insert($map, $important) {\n                @content;\n              }\n            }\n          }\n        }\n      } @else {\n        @include _handle-state($state) {\n          @include _insert($map, $important) {\n            @content;\n          }\n        }\n      }\n    }\n  }\n}\n","// @graupl/core border utilities styles.\n//\n// This file generates the border utility classes provided by Graupl.\n//\n// The following classes are generated by default:\n// - `.bordered`: Applies the default border styling.\n// - `.border-thick`: Sets the border width to `thick`.\n// - `.border-thin`: Sets the border width to `thin`.\n// - `.border-medium`: Sets the border width to `medium`.\n// - `.border-none`: Sets the border width to `none`.\n// - `.border-primary-100`: Sets the border color to Graupl's primary 100 color.\n// - `.border-primary-200`: Sets the border color to Graupl's primary 200 color.\n// - `.border-primary-300`: Sets the border color to Graupl's primary 300 color.\n// - `.border-primary-400`: Sets the border color to Graupl's primary 400 color.\n// - `.border-primary-500`: Sets the border color to Graupl's primary 500 color.\n// - `.border-primary-600`: Sets the border color to Graupl's primary 600 color.\n// - `.border-primary-700`: Sets the border color to Graupl's primary 700 color.\n// - `.border-primary-800`: Sets the border color to Graupl's primary 800 color.\n// - `.border-primary-900`: Sets the border color to Graupl's primary 900 color.\n// - `.border-secondary-100`: Sets the border color to Graupl's secondary 100 color.\n// - `.border-secondary-200`: Sets the border color to Graupl's secondary 200 color.\n// - `.border-secondary-300`: Sets the border color to Graupl's secondary 300 color.\n// - `.border-secondary-400`: Sets the border color to Graupl's secondary 400 color.\n// - `.border-secondary-500`: Sets the border color to Graupl's secondary 500 color.\n// - `.border-secondary-600`: Sets the border color to Graupl's secondary 600 color.\n// - `.border-secondary-700`: Sets the border color to Graupl's secondary 700 color.\n// - `.border-secondary-800`: Sets the border color to Graupl's secondary 800 color.\n// - `.border-secondary-900`: Sets the border color to Graupl's secondary 900 color.\n// - `.border-tertiary-100`: Sets the border color to Graupl's tertiary 100 color.\n// - `.border-tertiary-200`: Sets the border color to Graupl's tertiary 200 color.\n// - `.border-tertiary-300`: Sets the border color to Graupl's tertiary 300 color.\n// - `.border-tertiary-400`: Sets the border color to Graupl's tertiary 400 color.\n// - `.border-tertiary-500`: Sets the border color to Graupl's tertiary 500 color.\n// - `.border-tertiary-600`: Sets the border color to Graupl's tertiary 600 color.\n// - `.border-tertiary-700`: Sets the border color to Graupl's tertiary 700 color.\n// - `.border-tertiary-800`: Sets the border color to Graupl's tertiary 800 color.\n// - `.border-tertiary-900`: Sets the border color to Graupl's tertiary 900 color.\n// - `.border-transparent`: Sets the border color to `transparent`.\n// - `.border-solid`: Sets the border style to `solid`.\n// - `.border-dashed`: Sets the border style to `dashed`.\n// - `.border-dotted`: Sets the border style to `dotted`.\n// - `.border-double`: Sets the border style to `double`.\n// - `.border-groove`: Sets the border style to `groove`.\n// - `.border-ridge`: Sets the border style to `ridge`.\n// - `.border-inset`: Sets the border style to `inset`.\n// - `.border-outset`: Sets the border style to `outset`.\n// - `.border-none`: Sets the border style to `none`.\n//\n// The following custom properties control the generated classes:\n// - N/A.\n//\n// The following sass variables control the generated classes:\n// | Variable                           | Description                                                 | Default Value                                                       |\n// | ---                                | ---                                                         | ---                                                                 |\n// | `$selector-base`                   | Base selector for utility classes.                          | `\".\"`                                                               |\n// | `$use-important`                   | Append `!important` to generated declarations.              | `true`                                                              |\n// | `$generate-base-utilities`         | Generate the base utilities.                                | `true`                                                              |\n// | `$screen-aware`                    | Generate screen-aware variants.                             | `false`                                                             |\n// | `$theme-aware`                     | Generate theme-aware variants.                              | `false`                                                             |\n// | `$state-aware`                     | Generate state-aware variants.                              | `false`                                                             |\n// | `$container-aware`                 | Generate container-aware variants.                          | `false`                                                             |\n// | `$screen-aware-separator`          | Separator for screen-aware utilities.                       | `\"\\\\:\"`                                                             |\n// | `$theme-aware-separator`           | Separator for theme-aware utilities.                        | `\"\\\\:\"`                                                             |\n// | `$state-aware-separator`           | Separator for state-aware utilities.                        | `\"\\\\:\"`                                                             |\n// | `$container-aware-separator`       | Separator for container-aware utilities.                    | `\"\\\\:\"`                                                             |\n// | `$screen-aware-selector-prefix`    | Prefix for screen-aware utilities.                          | `\"\"`                                                                |\n// | `$theme-aware-selector-prefix`     | Prefix for theme-aware utilities.                           | `\"\"`                                                                |\n// | `$state-aware-selector-prefix`     | Prefix for state-aware utilities.                           | `\"\"`                                                                |\n// | `$container-aware-selector-prefix` | Prefix for container-aware utilities.                       | `\"cq\\\\:\"`                                                           |\n// | `$default-border-selector`         | Selector name for the default border utility.               | `\"bordered\"`                                                        |\n// | `$border-width-selector-prefix`    | Prefix for border-width utilities.                          | `\"border-\"`                                                         |\n// | `$border-width-properties`         | Map of border-width utility values.                         | `thick, thin, medium, none`                                         |\n// | `$border-color-selector-prefix`    | Prefix for border-color utilities.                          | `\"border-\"`                                                         |\n// | `$border-color-properties`         | Map of border-color utility values (includes theme shades). | `transparent`, all theme colours/shades                             |\n// | `$border-style-selector-prefix`    | Prefix for border-style utilities.                          | `\"border-\"`                                                         |\n// | `$border-style-properties`         | Map of border-style utility values.                         | `solid, dashed, dotted, double, groove, ridge, inset, outset, none` |\n//\n// Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.\n// By default, no responsive utility classes are generated.\n//\n// When set to true, screen-aware utility classes will be generated for each screen size in the following pattern:\n// - `.{screen-prefix}{screen-name}:{prefix}{value}`\n//\n// e.g. `.sm:border-thick` will set the `border-width` property to `thick` on screens equal to or larger than the `sm` breakpoint.\n//\n// When set to true, theme-aware utility classes will be generated for each theme in the following pattern:\n// - `.{theme-prefix}{theme-name}:{prefix}{value}`\n//\n// e.g. `.dark:border-thick` will set the `border-width` property to `thick` when the `dark` theme is active.\n//\n// When set to true, state-aware utility classes will be generated for each state in the following pattern:\n// - `.{state-prefix}{state-name}:{prefix}{value}`\n//\n// e.g. `.hover:border-thick` will set the `border-width` property to `thick` when the element is hovered.\n//\n// When set to true, container-aware utility classes will be generated for each container in the following pattern:\n// - `.{container-prefix}{container-name}:{prefix}{value}`\n//\n// e.g. `.cq:md:border-thick` will set the `border-width` property to `thick` when the parent container is larger than the `md` breakpoint.\n//\n// @example\n//   <div class=\"bordered\">This element has a border.</div>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../base/table/defaults\" as table-defaults;\n@use \"../../base/table/variables\" as table-variables;\n@use \"../../functions/important\";\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/screen\";\n@use \"../../mixins/utility\";\n@use \"../../theme/color/variables\" as color;\n@use \"../../variables\" as root-variables;\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n@include layer(utilities) {\n  // `.`\n  $selector-prefix: defaults.$selector-base;\n\n  // `.bordered`\n  $selector: #{$selector-prefix}#{defaults.$default-border-selector};\n\n  // Create a class to apply the default border styling.\n  @include utility.create-mapped(\n    $selector,\n    (\n      border-width: root-variables.$border-top-width\n        root-variables.$border-right-width root-variables.$border-bottom-width\n        root-variables.$border-left-width,\n      border-radius: root-variables.$border-top-left-radius\n        root-variables.$border-top-right-radius\n        root-variables.$border-bottom-right-radius\n        root-variables.$border-bottom-left-radius,\n      border-style: root-variables.$border-top-style\n        root-variables.$border-right-style root-variables.$border-bottom-style\n        root-variables.$border-left-style,\n    ),\n    $important: defaults.$use-important\n  );\n\n  // Checks to see if the table.bordered is already in place, then gives the tables variables instead.\n  /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n  @if #{table-defaults.$table-bordered-selector-base}#{table-defaults.$table-bordered-selector} ==\n    $selector\n  {\n    /* stylelint-enable  scss/operator-no-newline-after */\n    @include utility.create-mapped(\n      #{table-defaults.$table-selector-base}#{table-defaults.$table-selector}#{$selector},\n      (\n        border-width: table-variables.$table-border-width,\n        border-radius: table-variables.$table-border-radius,\n        border-style: table-variables.$table-border-style,\n      ),\n      $important: defaults.$use-important\n    );\n  }\n\n  // For each border width, create a class to apply the border width.\n  @each $width, $value in defaults.$border-width-properties {\n    // e.g. `.border-thick` or `.border-thin`\n    $selector: #{$selector-prefix}#{defaults.$border-width-selector-prefix}#{$width};\n\n    @include utility.create(\n      $selector,\n      border-width,\n      $value,\n      $important: defaults.$use-important\n    );\n  }\n\n  // For each border style, create a class to apply the border style.\n  @each $border-style, $value in defaults.$border-style-properties {\n    // e.g. `.border-solid` or `.border-dashed`\n    $selector: #{$selector-prefix}#{defaults.$border-style-selector-prefix}#{$border-style};\n\n    @include utility.create(\n      $selector,\n      border-style,\n      $value,\n      $important: defaults.$use-important\n    );\n  }\n\n  // For each theme colour, create a utility class for border color.\n  // @each $color, $map in map.get(color.$themes, active) {\n  //   @each $shade, $value in $map {\n  //     // e.g. `.border-primary-100` or `.border-secondary-900`\n  //     $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade};\n\n  //     @include utility.create(\n  //       $selector,\n  //       border-color,\n  //       $value,\n  //       $important: defaults.$use-important\n  //     );\n  //   }\n  // }\n\n  // For each border color, create a utility class for border color.\n  @each $name, $value in defaults.$border-color-properties {\n    // e.g. `.border-transparent`\n    $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$name};\n\n    @include utility.create(\n      $selector,\n      border-color,\n      $value,\n      $important: defaults.$use-important\n    );\n  }\n\n  // Generate screen-aware utilities.\n  @if defaults.$screen-aware and root-defaults.$screen-aware-utilities {\n    @each $screen-name in map.keys(root-defaults.$screen-sizes) {\n      // e.g. `.md:` or `.lg:`\n      $selector-prefix: #{defaults.$selector-base}#{defaults.$screen-aware-selector-prefix}#{$screen-name}#{defaults.$screen-aware-separator};\n\n      // e.g. `.md:bordered` or `.lg:bordered`\n      $selector: #{$selector-prefix}#{defaults.$default-border-selector};\n\n      // Create a class to apply the default border styling.\n      @include utility.create-mapped(\n        $selector,\n        (\n          border-width: root-variables.$border-top-width\n            root-variables.$border-right-width\n            root-variables.$border-bottom-width\n            root-variables.$border-left-width,\n          border-radius: root-variables.$border-top-left-radius\n            root-variables.$border-top-right-radius\n            root-variables.$border-bottom-right-radius\n            root-variables.$border-bottom-left-radius,\n          border-style: root-variables.$border-top-style\n            root-variables.$border-right-style\n            root-variables.$border-bottom-style\n            root-variables.$border-left-style,\n        ),\n        $important: defaults.$use-important,\n        $screen: $screen-name\n      );\n\n      // Checks to see if the table.bordered is already in place, then gives the tables variables instead.\n      /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n      @if #{table-defaults.$table-bordered-selector-base}#{table-defaults.$table-bordered-selector} ==\n        #{defaults.$selector-base}#{defaults.$default-border-selector}\n      {\n        /* stylelint-enable  scss/operator-no-newline-after */\n        @include utility.create-mapped(\n          #{table-defaults.$table-selector-base}#{table-defaults.$table-selector}#{$selector},\n          (\n            border-width: table-variables.$table-border-width,\n            border-radius: table-variables.$table-border-radius,\n            border-style: table-variables.$table-border-style,\n          ),\n          $important: defaults.$use-important,\n          $screen: $screen-name\n        );\n      }\n\n      // For each border width, create a class to apply the border width.\n      @each $width, $value in defaults.$border-width-properties {\n        // e.g. `.md:border-thick` or `.lg:border-thin`\n        $selector: #{$selector-prefix}#{defaults.$border-width-selector-prefix}#{$width};\n\n        @include utility.create(\n          $selector,\n          border-width,\n          $value,\n          $important: defaults.$use-important,\n          $screen: $screen-name\n        );\n      }\n\n      // For each border style, create a class to apply the border style.\n      @each $border-style, $value in defaults.$border-style-properties {\n        // e.g. `.md:border-solid` or `.lg:border-dashed`\n        $selector: #{$selector-prefix}#{defaults.$border-style-selector-prefix}#{$border-style};\n\n        @include utility.create(\n          $selector,\n          border-style,\n          $value,\n          $important: defaults.$use-important,\n          $screen: $screen-name\n        );\n      }\n\n      // For each theme colour, create a utility class for border color.\n      // @each $color, $map in map.get(color.$themes, active) {\n      //   @each $shade, $value in $map {\n      //     // e.g. `.md:border-primary-100` or `.lg:border-secondary-900`\n      //     $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade};\n\n      //     @include utility.create(\n      //       $selector,\n      //       border-color,\n      //       $value,\n      //       $important: defaults.$use-important,\n      //       $screen: $screen-name\n      //     );\n      //   }\n      // }\n\n      // For each border color, create a utility class for border color.\n      @each $name, $value in defaults.$border-color-properties {\n        // e.g. `.md:border-transparent` or `.lg:border-transparent`\n        $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$name};\n\n        @include utility.create(\n          $selector,\n          border-color,\n          $value,\n          $important: defaults.$use-important,\n          $screen: $screen-name\n        );\n      }\n    }\n  }\n\n  // Generate theme-aware utilities.\n  @if defaults.$theme-aware and root-defaults.$theme-aware-utilities {\n    @each $theme-name, $colors in color.$themes {\n      @if $theme-name != active {\n        // e.g. `.dark:` or `.light:`\n        $selector-prefix: #{defaults.$selector-base}#{defaults.$theme-aware-selector-prefix}#{$theme-name}#{defaults.$theme-aware-separator};\n\n        // e.g. `.dark:bordered` or `.light:bordered`\n        $selector: #{$selector-prefix}#{defaults.$default-border-selector};\n\n        // Create a class to apply the default border styling.\n        @include utility.create-mapped(\n          $selector,\n          (\n            border-width: root-variables.$border-top-width\n              root-variables.$border-right-width\n              root-variables.$border-bottom-width\n              root-variables.$border-left-width,\n            border-radius: root-variables.$border-top-left-radius\n              root-variables.$border-top-right-radius\n              root-variables.$border-bottom-right-radius\n              root-variables.$border-bottom-left-radius,\n            border-style: root-variables.$border-top-style\n              root-variables.$border-right-style\n              root-variables.$border-bottom-style\n              root-variables.$border-left-style,\n          ),\n          $important: defaults.$use-important,\n          $theme: $theme-name\n        );\n\n        // Checks to see if the table.bordered is already in place, then gives the tables variables instead.\n        /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n        @if #{table-defaults.$table-bordered-selector-base}#{table-defaults.$table-bordered-selector} ==\n          #{defaults.$selector-base}#{defaults.$default-border-selector}\n        {\n          /* stylelint-enable  scss/operator-no-newline-after */\n          @include utility.create-mapped(\n            #{table-defaults.$table-selector-base}#{table-defaults.$table-selector}#{$selector},\n            (\n              border-width: table-variables.$table-border-width,\n              border-radius: table-variables.$table-border-radius,\n              border-style: table-variables.$table-border-style,\n            ),\n            $important: defaults.$use-important,\n            $theme: $theme-name\n          );\n        }\n\n        // For each border width, create a class to apply the border width.\n        @each $width, $value in defaults.$border-width-properties {\n          // e.g. `.dark:border-thick` or `.light:border-thin`\n          $selector: #{$selector-prefix}#{defaults.$border-width-selector-prefix}#{$width};\n\n          @include utility.create(\n            $selector,\n            border-width,\n            $value,\n            $important: defaults.$use-important,\n            $theme: $theme-name\n          );\n        }\n\n        // For each border style, create a class to apply the border style.\n        @each $border-style, $value in defaults.$border-style-properties {\n          // e.g. `.dark:border-solid` or `.light:border-dashed`\n          $selector: #{$selector-prefix}#{defaults.$border-style-selector-prefix}#{$border-style};\n\n          @include utility.create(\n            $selector,\n            border-style,\n            $value,\n            $important: defaults.$use-important,\n            $theme: $theme-name\n          );\n        }\n\n        // For each theme colour, create a utility class for border color.\n        // @each $color, $map in map.get(color.$themes, active) {\n        //   @each $shade, $value in $map {\n        //     // e.g. `.dark:border-primary-100` or `.light:border-secondary-900`\n        //     $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade};\n\n        //     @include utility.create(\n        //       $selector,\n        //       border-color,\n        //       $value,\n        //       $important: defaults.$use-important,\n        //       $theme: $theme-name\n        //     );\n        //   }\n        // }\n\n        // For each border color, create a utility class for border color.\n        @each $name, $value in defaults.$border-color-properties {\n          // e.g. `.dark:border-transparent` or `.light:border-transparent`\n          $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$name};\n\n          @include utility.create(\n            $selector,\n            border-color,\n            $value,\n            $important: defaults.$use-important,\n            $theme: $theme-name\n          );\n        }\n      }\n    }\n  }\n\n  // Generate state-aware utilities.\n  @if defaults.$state-aware and root-defaults.$state-aware-utilities {\n    @each $state-name, $value in root-defaults.$state-selectors {\n      // e.g. `.hover:` or `.focus:`\n      $selector-prefix: #{defaults.$selector-base}#{defaults.$state-aware-selector-prefix}#{$state-name}#{defaults.$state-aware-separator};\n\n      // e.g. `.hover:bordered` or `.focus:bordered`\n      $selector: #{$selector-prefix}#{defaults.$default-border-selector};\n\n      // Create a class to apply the default border styling.\n      @include utility.create-mapped(\n        $selector,\n        (\n          border-width: root-variables.$border-top-width\n            root-variables.$border-right-width\n            root-variables.$border-bottom-width\n            root-variables.$border-left-width,\n          border-radius: root-variables.$border-top-left-radius\n            root-variables.$border-top-right-radius\n            root-variables.$border-bottom-right-radius\n            root-variables.$border-bottom-left-radius,\n          border-style: root-variables.$border-top-style\n            root-variables.$border-right-style\n            root-variables.$border-bottom-style\n            root-variables.$border-left-style,\n        ),\n        $important: defaults.$use-important,\n        $state: $state-name\n      );\n\n      // Checks to see if the table.bordered is already in place, then gives the tables variables instead.\n      /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n      @if #{table-defaults.$table-bordered-selector-base}#{table-defaults.$table-bordered-selector} ==\n        #{defaults.$selector-base}#{defaults.$default-border-selector}\n      {\n        /* stylelint-enable  scss/operator-no-newline-after */\n        @include utility.create-mapped(\n          #{table-defaults.$table-selector-base}#{table-defaults.$table-selector}#{$selector},\n          (\n            border-width: table-variables.$table-border-width,\n            border-radius: table-variables.$table-border-radius,\n            border-style: table-variables.$table-border-style,\n          ),\n          $important: defaults.$use-important,\n          $state: $state-name\n        );\n      }\n\n      // For each border width, create a class to apply the border width.\n      @each $width, $value in defaults.$border-width-properties {\n        // e.g. `.hover:border-thick` or `.focus:border-thin`\n        $selector: #{$selector-prefix}#{defaults.$border-width-selector-prefix}#{$width};\n\n        @include utility.create(\n          $selector,\n          border-width,\n          $value,\n          $important: defaults.$use-important,\n          $state: $state-name\n        );\n      }\n\n      // For each border style, create a class to apply the border style.\n      @each $border-style, $value in defaults.$border-style-properties {\n        // e.g. `.hover:border-solid` or `.focus:border-dashed`\n        $selector: #{$selector-prefix}#{defaults.$border-style-selector-prefix}#{$border-style};\n\n        @include utility.create(\n          $selector,\n          border-style,\n          $value,\n          $important: defaults.$use-important,\n          $state: $state-name\n        );\n      }\n\n      // For each theme colour, create a utility class for border color.\n      // @each $color, $map in map.get(color.$themes, active) {\n      //   @each $shade, $value in $map {\n      //     // e.g. `.hover:border-primary-100` or `.focus:border-secondary-900`\n      //     $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade};\n\n      //     @include utility.create(\n      //       $selector,\n      //       border-color,\n      //       $value,\n      //       $important: defaults.$use-important,\n      //       $state: $state-name\n      //     );\n      //   }\n      // }\n\n      // For each border color, create a utility class for border color.\n      @each $name, $value in defaults.$border-color-properties {\n        // e.g. `.hover:border-transparent` or `.focus:border-transparent`\n        $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$name};\n\n        @include utility.create(\n          $selector,\n          border-color,\n          $value,\n          $important: defaults.$use-important,\n          $state: $state-name\n        );\n      }\n    }\n  }\n\n  // Generate container-aware utilities.\n  @if defaults.$container-aware and root-defaults.$container-aware-utilities {\n    @each $container-name in map.keys(root-defaults.$container-sizes) {\n      // e.g. `.md:` or `.lg:`\n      $selector-prefix: #{defaults.$selector-base}#{defaults.$container-aware-selector-prefix}#{$container-name}#{defaults.$container-aware-separator};\n\n      // e.g. `.md:bordered` or `.lg:bordered`\n      $selector: #{$selector-prefix}#{defaults.$default-border-selector};\n\n      // Create a class to apply the default border styling.\n      @include utility.create-mapped(\n        $selector,\n        (\n          border-width: root-variables.$border-top-width\n            root-variables.$border-right-width\n            root-variables.$border-bottom-width\n            root-variables.$border-left-width,\n          border-radius: root-variables.$border-top-left-radius\n            root-variables.$border-top-right-radius\n            root-variables.$border-bottom-right-radius\n            root-variables.$border-bottom-left-radius,\n          border-style: root-variables.$border-top-style\n            root-variables.$border-right-style\n            root-variables.$border-bottom-style\n            root-variables.$border-left-style,\n        ),\n        $important: defaults.$use-important,\n        $container: $container-name\n      );\n\n      // Checks to see if the table.bordered is already in place, then gives the tables variables instead.\n      /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n      @if #{table-defaults.$table-bordered-selector-base}#{table-defaults.$table-bordered-selector} ==\n        #{defaults.$selector-base}#{defaults.$default-border-selector}\n      {\n        /* stylelint-enable  scss/operator-no-newline-after */\n        @include utility.create-mapped(\n          #{table-defaults.$table-selector-base}#{table-defaults.$table-selector}#{$selector},\n          (\n            border-width: table-variables.$table-border-width,\n            border-radius: table-variables.$table-border-radius,\n            border-style: table-variables.$table-border-style,\n          ),\n          $important: defaults.$use-important,\n          $container: $container-name\n        );\n      }\n\n      // For each border width, create a class to apply the border width.\n      @each $width, $value in defaults.$border-width-properties {\n        // e.g. `.md:border-thick` or `.lg:border-thin`\n        $selector: #{$selector-prefix}#{defaults.$border-width-selector-prefix}#{$width};\n\n        @include utility.create(\n          $selector,\n          border-width,\n          $value,\n          $important: defaults.$use-important,\n          $container: $container-name\n        );\n      }\n\n      // For each border style, create a class to apply the border style.\n      @each $border-style, $value in defaults.$border-style-properties {\n        // e.g. `.md:border-solid` or `.lg:border-dashed`\n        $selector: #{$selector-prefix}#{defaults.$border-style-selector-prefix}#{$border-style};\n\n        @include utility.create(\n          $selector,\n          border-style,\n          $value,\n          $important: defaults.$use-important,\n          $container: $container-name\n        );\n      }\n\n      // For each theme colour, create a utility class for border color.\n      // @each $color, $map in map.get(color.$themes, active) {\n      //   @each $shade, $value in $map {\n      //     // e.g. `.md:border-primary-100` or `.lg:border-secondary-900`\n      //     $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade};\n\n      //     @include utility.create(\n      //       $selector,\n      //       border-color,\n      //       $value,\n      //       $important: defaults.$use-important,\n      //       $container: $container-name\n      //     );\n      //   }\n      // }\n\n      // For each border color, create a utility class for border color.\n      @each $name, $value in defaults.$border-color-properties {\n        // e.g. `.md:border-transparent` or `.lg:border-transparent`\n        $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$name};\n\n        @include utility.create(\n          $selector,\n          border-color,\n          $value,\n          $important: defaults.$use-important,\n          $container: $container-name\n        );\n      }\n    }\n  }\n}\n"],"names":[]}