Update styling standards to prioritize SCSS Modules over Emotion

[andrewscfc]

Summary

Updates our component standards to reflect the expectation that we should now use SCSS Modules

Useful Links

• Coding Standards
• Repository use guidelines
• Add Links to useful resources related to this PR if applicable.

[Copilot]

Pull request overview

Updates Simorgh’s styling standards documentation to reflect the ongoing migration away from Emotion (CSS-in-JS) toward SCSS Modules + CSS custom properties via ThemeProviderSCSSModules, including guidance on tokens, dark UI, Opera Mini fallbacks, and bidirectional styling.

Changes:

• Replaces Emotion-centric guidance with SCSS Modules-first rules for new/modified components.
• Adds guidance/examples for using @scss/themeTokens, dark UI overrides, and Opera Mini-safe patterns.
• Updates bidi and responsive styling guidance to better align with SCSS Modules and tokenised media queries.

Comments suppressed due to low confidence (6)

docs/Coding-Standards/Styles.mdx:165

• This Opera Mini override example uses theme.$spacings-* / theme.$mediaQueries-* but doesn’t include @use '@scss/themeTokens' as theme;, so it won’t compile if copied. Add the @use line to the snippet.

.promoBox {
  position: relative;
  width: 100%;

  // Opera Mini can't reliably lay these boxes out with flex/grid sizing,

docs/Coding-Standards/Styles.mdx:200

• This example uses theme.$spacings-full but doesn’t include @use '@scss/themeTokens' as theme;, so it won’t compile if copied verbatim. Add the @use line to make the snippet self-contained.

.wrapper {
  padding-left: #{theme.$spacings-full};

  :global([dir='rtl']) & {
    padding-left: 0;

docs/Coding-Standards/Styles.mdx:227

• This gap example references theme.$spacings-full but doesn’t include @use '@scss/themeTokens' as theme;, so it won’t compile if copied. Add the @use line for completeness.

.list {
  display: flex;
  flex-direction: column;
  gap: #{theme.$spacings-full};
}

docs/Coding-Standards/Styles.mdx:359

• This “❌” media-query example uses theme.$spacings-* but doesn’t include @use '@scss/themeTokens' as theme;, so it won’t compile if copied. Add the @use line so the example remains runnable while still illustrating the hard-coded breakpoint.

.wrapper {
  padding: #{theme.$spacings-half};

  @media (min-width: 40rem) {
    padding: #{theme.$spacings-full};

docs/Coding-Standards/Styles.mdx:213

• This logical-properties example uses theme.$spacings-full but doesn’t show @use '@scss/themeTokens' as theme;, so it won’t compile if copied. Add the @use line inside the snippet to keep it self-contained.

.wrapper {
  padding-inline-start: #{theme.$spacings-full};
}

docs/Coding-Standards/Styles.mdx:251

• This SCSS example references theme.$spacings-full but doesn’t include @use '@scss/themeTokens' as theme;, so it won’t compile if copied. Add the @use line to the snippet.

.wrapper {
  padding-inline-start: #{theme.$spacings-full};
}