diff --git a/.storybook/main.js b/.storybook/main.js index 380d8d53..b426dbc0 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -21,7 +21,6 @@ module.exports = { }, '@storybook/addon-a11y', '@storybook/addon-docs', - '@etchteam/storybook-addon-css-variables-theme', '@storybook/addon-webpack5-compiler-babel' ], 'framework': { diff --git a/.storybook/preview.js b/.storybook/preview.js index fbbe2733..ab05ebc2 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,5 +1,4 @@ import React from 'react'; -import cssVariablesTheme from '@etchteam/storybook-addon-css-variables-theme' import { Title, Subtitle, @@ -13,20 +12,10 @@ import Button from 'components/controls/Button/Button' import Spacing from 'components/composition/Spacing/Spacing' import Grid from 'components/composition/Grid/Grid' -import base from '!!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!../src/styles/themes/default/main.scss' -import tbor from '!!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!../src/styles/themes/business-of-recycling/main.scss' - import './styles.scss' export const parameters = { viewMode: 'docs', - cssVariables: { - files: { - 'Default': base, - 'Business of recycling': tbor, - }, - defaultTheme: 'Default', - }, docs: { page: ({ of }) => { const resolvedOf = useOf(of || 'story', ['story', 'meta']); @@ -79,8 +68,4 @@ export const parameters = { } } -export const decorators = [ - cssVariablesTheme, -] - export const tags = ['autodocs']; diff --git a/package-lock.json b/package-lock.json index 745b53c5..acac91f3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,7 +32,6 @@ "@commitlint/cli": "^19.4.1", "@commitlint/config-conventional": "^19.4.1", "@etchteam/eslint-config": "^2.0.12", - "@etchteam/storybook-addon-css-variables-theme": "^3.0.0", "@etchteam/stylelint-config": "^1.0.1", "@rollup/plugin-babel": "6.0.4", "@rollup/plugin-commonjs": "23.0.2", @@ -3197,13 +3196,6 @@ "integrity": "sha512-1hFrkAdOvaX+2hW4ytKPPx1Swt+cTC3ivxIMiCjNlpJhP81XqfEFr5UgK8/QQhW3F3suf09G5oYG4m3Erz93RA==", "license": "MIT" }, - "node_modules/@etchteam/storybook-addon-css-variables-theme": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@etchteam/storybook-addon-css-variables-theme/-/storybook-addon-css-variables-theme-3.0.0.tgz", - "integrity": "sha512-4/mGTPs5LfI/6Gz+P9QkeIxTfWXiR+3gfbgn72u5zL+D7XJZQ+AU0ik8he8yjgFEMdJx3lYfM1m/r2a2pfrO+A==", - "dev": true, - "license": "MIT" - }, "node_modules/@etchteam/stylelint-config": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@etchteam/stylelint-config/-/stylelint-config-1.5.0.tgz", @@ -30589,12 +30581,6 @@ "resolved": "https://registry.npmjs.org/@etchteam/mobius-tokens/-/mobius-tokens-1.4.0.tgz", "integrity": "sha512-1hFrkAdOvaX+2hW4ytKPPx1Swt+cTC3ivxIMiCjNlpJhP81XqfEFr5UgK8/QQhW3F3suf09G5oYG4m3Erz93RA==" }, - "@etchteam/storybook-addon-css-variables-theme": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@etchteam/storybook-addon-css-variables-theme/-/storybook-addon-css-variables-theme-3.0.0.tgz", - "integrity": "sha512-4/mGTPs5LfI/6Gz+P9QkeIxTfWXiR+3gfbgn72u5zL+D7XJZQ+AU0ik8he8yjgFEMdJx3lYfM1m/r2a2pfrO+A==", - "dev": true - }, "@etchteam/stylelint-config": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@etchteam/stylelint-config/-/stylelint-config-1.5.0.tgz", diff --git a/package.json b/package.json index eb0191e0..f87c89c9 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,6 @@ "@commitlint/cli": "^19.4.1", "@commitlint/config-conventional": "^19.4.1", "@etchteam/eslint-config": "^2.0.12", - "@etchteam/storybook-addon-css-variables-theme": "^3.0.0", "@etchteam/stylelint-config": "^1.0.1", "@rollup/plugin-babel": "6.0.4", "@rollup/plugin-commonjs": "23.0.2", diff --git a/src/components/content/ContainerSvg/ContainerSvg.module.scss b/src/components/content/ContainerSvg/ContainerSvg.module.scss index b7dcb8dd..c447011d 100644 --- a/src/components/content/ContainerSvg/ContainerSvg.module.scss +++ b/src/components/content/ContainerSvg/ContainerSvg.module.scss @@ -14,7 +14,7 @@ } &.container-svg__body--colour-transparent { - stroke: color.$blue-darkest; + stroke: var(--color-forest); } } } diff --git a/src/styles/themes/business-of-recycling/main.scss b/src/styles/themes/business-of-recycling/main.scss deleted file mode 100644 index 21235264..00000000 --- a/src/styles/themes/business-of-recycling/main.scss +++ /dev/null @@ -1,85 +0,0 @@ -@use '../../variables/breakpoint'; -@use '../../variables/color'; -@use '../../mixins/skin'; - -// Create the skins globally -$skins: light, medium, dark, info, accent, neutral, positive, negative, - attention; - -@include skin.create-skins($skins); - -:root { - --skin-background-light: #{color.$white}; - --skin-background-muted-light: #{color.$harp}; - --skin-border-color-light: #{color.$blue-light}; - --skin-color-light: #{color.$blue-darkest}; - --skin-color-muted-light: #{color.$blue-darkest}; - --skin-heading-color-light: #{color.$blue-darkest}; - --skin-link-color-light: #{color.$blue-darkest}; - --skin-link-text-decoration-light: underline; - - --skin-background-medium: #{color.$duck-egg}; - --skin-background-muted-medium: #{color.$duck-egg}; - --skin-border-color-medium: transparent; - --skin-color-medium: #{color.$blue-darkest}; - --skin-color-muted-medium: #{color.$blue-darkest}; - --skin-heading-color-medium: #{color.$blue-darkest}; - --skin-link-color-medium: #{color.$blue-darkest}; - - --skin-background-accent: #{color.$citrus}; - --skin-background-muted-accent: #{color.$citrus}; - --skin-border-color-accent: transparent; - --skin-color-accent: #{color.$blue-darkest}; - --skin-color-muted-accent: #{color.$blue-darkest}; - --skin-heading-color-accent: #{color.$blue-darkest}; - --skin-link-color-accent: #{color.$blue-darkest}; - - --font-size-h1: 2.25rem; - --font-size-h2: 1.75rem; - --font-size-h3: 1.25rem; - --font-size-h4: 1.125rem; - - --font-size-lead: 1.125rem; - - --heading-font-weight: 800; - --link-font-weight: 700; - - --button-border-radius: 1.5rem; - --button-border-width: 2px; - - --button-background: #{color.$white}; - --button-border-color: #{color.$blue-darkest}; - --button-color: #{color.$blue-darkest}; - - --button-background-primary: #{color.$citrus}; - --button-border-color-primary: transparent; - --button-color-primary: #{color.$blue-darkest}; - - --button-background-secondary: #{color.$blue-darkest}; - --button-border-color-secondary: transparent; - --button-color-secondary: #{color.$white}; - - --input-background: #{color.$white}; - --input-background-focus: #{color.$white}; - --input-border: #{color.$duck-egg}; - --input-border-hover: #{color.$duck-egg}; - --input-color: #{color.$blue-darkest}; - --input-checked: #{color.$blue-darkest}; - --input-checkradio-border-radius: var(--button-border-radius); - --input-outline-color-focus: Highlight; - --input-outline-color-focus-webkit: -webkit-focus-ring-color; - --input-outline-style-focus: auto; - --input-outline-width-focus: 5px; - - --card-border-radius: 0.5rem; -} - -@media (min-width: breakpoint.$tablet) { - :root { - --font-size-h1: 3rem; - --font-size-h2: 2rem; - --font-size-h3: 1.5rem; - --font-size-h4: 1.25rem; - --font-size-lead: 1.25rem; - } -} diff --git a/src/styles/variables/color.scss b/src/styles/variables/color.scss index 1a5fbe12..d0557cae 100644 --- a/src/styles/variables/color.scss +++ b/src/styles/variables/color.scss @@ -1,34 +1,3 @@ -// Old colours that haven't been swapped out yet. TODO -$white: #fff; -$blue-light: #d7e7f5; -$blue-darkest: #05224b; -$blue-2: #2d9cdb; - -$teal: #2e627a; - -$grey-light: #eceff2; - -$yellow: #f3ce36; -$yellow-light: #fcf0bf; - -$orange: #f2994a; - -$purple: #5a62a6; - -$green: #228524; -$green-light: #e2f5e2; -$green-3: #6fcf97; - -$maroon: #860e4a; -$magenta: #d12767; - -$red: #eb5757; - -// Business recycling hub -$harp: #ebf5f1; -$duck-egg: #89c1ab; -$citrus: #c7d56b; - :root { --color-forest: var(--mobius-color-forest); --color-forest-75: var(--mobius-color-forest-75); diff --git a/src/styles/variables/skin.scss b/src/styles/variables/skin.scss deleted file mode 100644 index 3ba1bbd2..00000000 --- a/src/styles/variables/skin.scss +++ /dev/null @@ -1,10 +0,0 @@ -// TODO: This can be deleted once BoR styles have been updated -$background: var(--skin-background); -$background-muted: var(--skin-background-muted); -$color: var(--skin-color); -$color-muted: var(--skin-color-muted); -$heading-color: var(--skin-heading-color); -$link-color: var(--skin-link-color); -$border-color: var(--skin-border-color); -$link-text-decoration: var(--skin-link-text-decoration); -$link-text-decoration-hover: var(--skin-link-text-decoration-hover);