What other scss variables can be overriden

[brightpixels]

Hello, At the moment, I can set the following scss variables to override GDS styles

$govuk-assets-path: "~govuk-frontend/govuk/assets/";
$govuk-font-family: "Inter";

What other things can be overrriden? Where do I look for this list? I am looking to, for example, change some base colours or accent colours, etc

[ghost]

@brightpixels Take a look at the govuk-frontend

Check out the 'src/govuk' directory, you'll find all the SCSS files used and you'll find all the variables that can be overridden.

To change an accent look in 'src/govuk/settings/_colours-palette.scss' for accent colours.

[brightpixels]

Thank you

[andymantell]

Thanks @moodledan !

[ianhomer]

Freaky, an engineer on our project just wrote this exact same line last week,

$govuk-assets-path: "~govuk-frontend/govuk/assets/";

We were having issues importing the fonts files into the next.js build. By changing that line, next.js / webpack detected the font file references as local links and then bundled them in our web build. By default it is /assets/ and https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#font-and-image-assets states that you should either "Copy the font and image files into your application" (mm! we were happy doing that) or set up express explicit route. We were impressed that by changing this to a package relative reference next.js / webpack sorted this bundling out for us :)

We were looking at variables in https://github.com/alphagov/govuk-frontend/blob/master/src/govuk/settings/_assets.scss to find this variable. All the variables in https://github.com/alphagov/govuk-frontend/tree/master/src/govuk/settings are probably overrideable.

[andymantell]

Webpack is amazing when all the magic aligns :-)

I use the same value here: https://github.com/surevine/govuk-react-jsx-examples/blob/master/src/styles.scss

Works perfectly with default create-react-app

[ghost]

Me to, except I want a little overboard:

` $govuk-assets-path: "~govuk-frontend/govuk/assets/";

// ## Simple:

// @import "~govuk-frontend/govuk/all";

// ## Or include, exclude and override styles as required:

// @import "~govuk-frontend/govuk/base"; // ## base/settings @import "~govuk-frontend/govuk/settings/assets"; @import "~govuk-frontend/govuk/settings/compatibility"; @import "~govuk-frontend/govuk/settings/global-styles"; @import "~govuk-frontend/govuk/settings/ie8"; @import "~govuk-frontend/govuk/settings/media-queries"; @import "colours-palette"; @import "~govuk-frontend/govuk/settings/colours-organisations"; @import "~govuk-frontend/govuk/settings/colours-applied"; @import "~govuk-frontend/govuk/settings/spacing"; @import "~govuk-frontend/govuk/settings/measurements"; @import "~govuk-frontend/govuk/settings/typography-font-families"; @import "~govuk-frontend/govuk/settings/typography-font"; @import "~govuk-frontend/govuk/settings/typography-responsive";

// @import "~govuk-frontend/govuk/tools/all"; // ## base/tools @import "~govuk-frontend/govuk/tools/compatibility"; @import "~govuk-frontend/govuk/tools/exports"; @import "~govuk-frontend/govuk/tools/font-url"; @import "~govuk-frontend/govuk/tools/ie8"; @import "~govuk-frontend/govuk/tools/iff"; @import "~govuk-frontend/govuk/tools/image-url"; @import "~govuk-frontend/govuk/tools/px-to-em"; @import "~govuk-frontend/govuk/tools/px-to-rem";

// @import "~govuk-frontend/govuk/helpers/all"; // ## base/helpers @import "~govuk-frontend/govuk/helpers/clearfix"; @import "~govuk-frontend/govuk/helpers/colour"; @import "~govuk-frontend/govuk/helpers/device-pixels"; @import "~govuk-frontend/govuk/helpers/focused"; @import "~govuk-frontend/govuk/helpers/font-faces"; @import "~govuk-frontend/govuk/helpers/grid"; @import "~govuk-frontend/govuk/helpers/links"; @import "~govuk-frontend/govuk/helpers/media-queries"; @import "~govuk-frontend/govuk/helpers/shape-arrow"; @import "~govuk-frontend/govuk/helpers/spacing"; @import "~govuk-frontend/govuk/helpers/typography"; @import "~govuk-frontend/govuk/helpers/visually-hidden";

// @import "~govuk-frontend/govuk/core/all"; // ## core @import "~govuk-frontend/govuk/core/links"; @import "~govuk-frontend/govuk/core/lists"; @import "~govuk-frontend/govuk/core/template"; @import "~govuk-frontend/govuk/core/typography"; @import "~govuk-frontend/govuk/core/section-break"; @import "~govuk-frontend/govuk/core/global-styles";

// @import "~govuk-frontend/govuk/objects/all"; // ## objects @import "~govuk-frontend/govuk/objects/form-group"; @import "~govuk-frontend/govuk/objects/grid"; @import "~govuk-frontend/govuk/objects/main-wrapper"; @import "~govuk-frontend/govuk/objects/width-container";

// @import "~govuk-frontend/govuk/components/all"; // ## components @import "~govuk-frontend/govuk/components/accordion/index"; @import "~govuk-frontend/govuk/components/back-link/index"; @import "~govuk-frontend/govuk/components/breadcrumbs/index"; // @import "~govuk-frontend/govuk/components/button/index"; @import "button"; @import "~govuk-frontend/govuk/components/checkboxes/index"; @import "~govuk-frontend/govuk/components/character-count/index"; @import "~govuk-frontend/govuk/components/summary-list/index"; @import "~govuk-frontend/govuk/components/date-input/index"; @import "~govuk-frontend/govuk/components/details/index"; @import "~govuk-frontend/govuk/components/error-message/index"; @import "~govuk-frontend/govuk/components/error-summary/index"; @import "~govuk-frontend/govuk/components/fieldset/index"; @import "~govuk-frontend/govuk/components/file-upload/index"; @import "~govuk-frontend/govuk/components/footer/index"; @import "~govuk-frontend/govuk/components/hint/index"; @import "~govuk-frontend/govuk/components/header/index"; @import "~govuk-frontend/govuk/components/input/index"; @import "~govuk-frontend/govuk/components/inset-text/index"; @import "~govuk-frontend/govuk/components/label/index"; @import "~govuk-frontend/govuk/components/notification-banner/index"; @import "~govuk-frontend/govuk/components/panel/index"; @import "~govuk-frontend/govuk/components/phase-banner/index"; @import "~govuk-frontend/govuk/components/tabs/index"; @import "~govuk-frontend/govuk/components/tag/index"; @import "~govuk-frontend/govuk/components/radios/index"; @import "~govuk-frontend/govuk/components/select/index"; @import "~govuk-frontend/govuk/components/skip-link/index"; @import "~govuk-frontend/govuk/components/table/index"; @import "~govuk-frontend/govuk/components/textarea/index"; @import "~govuk-frontend/govuk/components/warning-text/index";

// @import "~govuk-frontend/govuk/utilities/all"; // ## utilities @import "~govuk-frontend/govuk/utilities/clearfix"; @import "~govuk-frontend/govuk/utilities/visually-hidden";

// @import "~govuk-frontend/govuk/overrides/all"; // ## overrides @import "~govuk-frontend/govuk/overrides/display"; @import "~govuk-frontend/govuk/overrides/spacing"; @import "~govuk-frontend/govuk/overrides/typography"; @import "~govuk-frontend/govuk/overrides/width"; `

[ghost]

The above mean't I could then create styles/_colours-palette.scss and totally customise the palette as desired.

[andymantell]

https://github.com/alphagov/govuk-frontend/blob/8748418071b7e753a2085b409d10e1c2fb40990e/src/govuk/settings/_colours-palette.scss#L108

Couldn't you have done that by overriding this $govuk-colours variable? It has the !default incantation after it?

[andymantell]

Sounds interesting though. Are you working on something non govuk? Or internal to a department?

[ghost]

@andymantell Just experimenting right now, no reason why I'd need really need this level of control - more just about being comfortable knowing I can and how flexible what you've put together really is.

An example of this is a new component comes from govuk-frontend, like the new cookie banner, but isn't yet part of your framework. However I could 'shoe horn' the styles into my project and build a separate component before you merge in the latest or experimental features.

[andymantell]

Fair enough!

Incidentally, the cookie banner is on its way. I've mostly finished the port, just failing a couple of the tests. Should be done soon and I'll release an update...

[ghost]

@andymantell Thats awesome, bit of a flurry of updates on govuk-frontend recently so thats great news.

[ghost]

@andymantell Maybe I'm just a control freak :)

[ianhomer]

Wow - wake up and see these tips :) We're currently trying to optimise the CSS in our stack and I'll share this with the team on Monday.