{"version":3,"file":"css/id7-default-theme.css","mappings":"AAKA,yBAKE,mCACE,qBALF,CACF,CAQA,cC0EI,mCACA,4CADA,mCACA,4CADA,mCACA,yCADA,mCACA,yCADA,mCACA,yCAqBF,sDAAuD,CACvD,iCACA,0CACA,wCAEA,6CAA8C,CAC9C,sDAAuD,CAGvD,oCAEA,wCAKA,6BACA,sCDnGF","sources":["webpack://@universityofwarwick/id7/./less/default-theme.less","webpack://@universityofwarwick/id7/./less/mixins/branding.less"],"sourcesContent":["@import (reference) '../bootstrap/less/variables.less';\n@import (reference) '../bootstrap/less/mixins.less';\n@import (reference) 'variables.less';\n@import (reference) 'mixins.less';\n\n@media (min-width: @grid-float-breakpoint) {\n  .id7-left-border {\n    background-color: @gray-lighter;\n  }\n\n  .id7-right-border {\n    background-color: @gray-lighter;\n  }\n}\n\n:where(:root) {\n  // Keep default theme colour as it was before\n  //@brand-var: \"id7-brand-lavender\";\n  @brand-var: \"id7-brand-blue\";\n  .brand-css-variables(@@brand-var);\n}\n","// TODO add a `when (@id7-gen = 2024)` guard to slim down new brand CSS\n\n.apply-site-imagery(\n  @basedir,\n  @masthead-image: \"masthead-image.jpg\",\n  @border-image-left: \"border-image-left.jpg\",\n  @border-image-right: \"border-image-right.jpg\") {\n\n  .apply-left-border-image(\"@{basedir}/@{border-image-left}\");\n  .apply-right-border-image(\"@{basedir}/@{border-image-right}\");\n}\n\n.apply-left-border-image(@url) {\n  @media (min-width: @grid-float-breakpoint) {\n    .id7-left-border {\n      background-image: url(@url);\n    }\n  }\n}\n\n.apply-right-border-image(@url) {\n  @media (min-width: @grid-float-breakpoint) {\n    .id7-right-border {\n      background-image: url(@url);\n    }\n  }\n}\n\n// Generates a set of valid colours for a given brand colour.\n// Colours are grouped into pairs for use in different contexts.\n// Colours of a pair should pass AA contrast.\n// Pure LESS Function - doesn't generate any CSS.\n.calculate-brand-colours(@colour) {\n  @primary: @colour;\n  @primary-contrast: #wcag.contrast(@primary, white, @text-color)[@result];\n\n  // \"private\" values\n  @_base-secondary: tint(@colour, 30%);\n  @_secondary-result: #wcag.ultra-contrast(@_base-secondary, white, @text-color);\n\n  // ultra-contrast may end up darkening or lightening the background to achieve AA\n  @secondary-calc-msg: @_secondary-result[@msg];\n  @secondary: @_secondary-result[@bg];\n  @secondary-contrast: @_secondary-result[@fg];\n  // Used for some minor link hover states\n  @secondary-accent: #wcag.contrast(@secondary-contrast,\n    multiply(@secondary, darken(white, 20%)),\n    tint(@secondary, 30%)\n  )[@result];\n\n  // A colour we can place on white. For links and headings\n  @white-emphasis: #wcag.contrast-fallback(white, @primary, @text-color)[@result];\n\n  // A deeper colour we can place on white. May be the same as @white-emphasis if they are both black\n  @white-deep-emphasis: #wcag.contrast-fallback(white, darken(@primary, 20%), @text-color)[@result];\n\n  // Links/headings on a pale tint of brand colour\n  @pale: tint(@colour, 85%);\n  @pale-emphasis: #wcag.contrast-fallback(@pale, @primary, @text-color)[@result];\n\n  // Links/headings on pale grey\n  @pale-grey: @gray-lighter;\n  @pale-grey-emphasis: #wcag.contrast-fallback(@pale-grey, @primary, @text-color)[@result];\n\n}\n\n// Generates reference tokens for all the colours derived from a brand colour.\n.generate-tint-variables(@name, @clazz, @colour) {\n  // Set of tints of the primary colour.\n  // Copying Bootstrap 5's 100-900 system.\n  // Some are commented out to reduce the number of generated colours, but we can add them back if we need them.\n  @scale-values:\n          100 80%, // lightest\n          //200 60%,\n          300 40%,\n          //400 20%,\n          500 0%,  // 500 is always the base colour\n          //600 20%,\n          700 40%,\n          //800 60%,\n          900 80%; // darkest\n\n  each(@scale-values, {\n    @step: extract(@value, 1);\n    @percent: extract(@value, 2);\n\n    @mix-color: if(@step < 500, #ffffff, if(@step > 500, #000000, @colour));\n    @final-color: if(@step = 500, @colour, mix(@mix-color, @colour, @percent));\n\n    --w-@{clazz}-colors-@{name}-@{step}: @final-color;\n    --w-@{clazz}-colors-@{name}-@{step}-contrast: #wcag.contrast(@final-color, white, @text-color)[];\n  });\n}\n\n// Define the CSS variables for a brand colour.\n// This can't be called from the top level like apply-brand,\n// because it isn't valid CSS. In those cases you can call\n// this inside :root or inside a class, depending on when\n// you want them to apply.\n//\n// This should only be used if @colour is not one of the brand\n// palette colours. If it is, you should mix in .id7-brand-COLOURNAME\n// to get the correct aliases (or just add that class to your HTML document).\n.brand-css-variables(@colour) {\n  @colours: .calculate-brand-colours(@colour);\n\n  //// Colour pairings\n\n  .generate-tint-variables(primary, sys, @colour);\n\n  // Secondary colour background\n  --w-sys-colors-primary: var(--w-sys-colors-primary-500);\n  --w-sys-colors-secondary: @colours[@secondary];\n  --w-sys-colors-secondary-contrast: @colours[@secondary-contrast];\n  --w-sys-colors-secondary-accent: @colours[@secondary-accent];\n\n  --w-sys-colors-alt-bg: var(--w-sys-colors-300);\n  --w-sys-colors-alt-fg: var(--w-sys-colors-300-contrast);\n\n  // A colour we can place on white - can fall back to black\n  --w-sys-colors-white-accent: @colours[@white-emphasis];\n  // Slightly deeper colour (or black again)\n  --w-sys-colors-white-deepAccent: @colours[@white-deep-emphasis];\n\n  // This grey doesn't depend on the brand colour\n  // but the emphasis colour does - may as well keep\n  // them together.\n  --w-sys-colors-paleGrey: @colours[@pale-grey];\n  --w-sys-colors-paleGrey-accent: @colours[@pale-grey-emphasis];\n}\n\n// Adds crest as a background image of an element.\n// You will need to position it in an appropriate corner\n// and possibly add padding to avoid overdraw.\n.crest-bg(@defaultStyle) {\n  background-repeat: no-repeat;\n  background-size: auto var(--w-sys-crestHeight);\n}\n\n.crest-bg(positive) {\n  background-image: var(--w-ref-images-crestPositive);\n  .id7-dark-background & {\n    background-image: var(--w-ref-images-crestNegative);\n  }\n}\n\n.crest-bg(negative) {\n  background-image: var(--w-ref-images-crestNegative);\n  .id7-light-background & {\n    background-image: var(--w-ref-images-crestPositive);\n  }\n}\n"],"names":[],"sourceRoot":""}