Skip to content

Commit

Permalink
Merge pull request #54 from studio24/feature/new-colour-variables
Browse files Browse the repository at this point in the history 
feat: Update starting colour variables
  • Loading branch information
@NicolaSaunders
NicolaSaunders authored Jan 4, 2024
2 parents d3693c2 + 594681c commit 3f34397
Show file tree
Hide file tree
Showing 20 changed files with 195 additions and 147 deletions.
80 changes: 62 additions & 18 deletions assets-src/styles/sass/00-settings/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,53 @@
/**
Brand
*/
$blue: #0d599b;
$navy: #001f3f;
$purple: #920ba6;
$brand-100: #01172e;
$brand-90: #032749;
$brand-80: #063a69;
$brand-70: #0c5492;
$brand-60: #1371c2;
$brand-55: #0b80e5;
$brand-50: #1b90f4;
$brand-40: #6faafc;
$brand-30: #a9c7fd;
$brand-20: #c9e3fe;
$brand-10: #e9f6ff;



/**
Accent
*/
$accent-100: #350014;
$accent-90: #530023;
$accent-80: #760035;
$accent-70: #a4004c;
$accent-65: #bf0059;
$accent-60: #da0067;
$accent-50: #ff4085;
$accent-40: #ff7fa3;
$accent-30: #ffb1c3;
$accent-20: #ffd6df;
$accent-10: #fff1f4;



/**
Neutrals
*/
$neutral-100: #161616;
$neutral-90: #262626;
$neutral-80: #393939;
$neutral-70: #525252;
$neutral-60: #6f6f6f;
$neutral-50: #8d8d8d;
$neutral-40: #a8a8a8;
$neutral-30: #c6c6c6;
$neutral-20: #e0e0e0;
$neutral-10: #f4f4f4;

$off-black: #252525; /* 1 */
$off-white: #fcfcfc; /* 1 */
$storm-gray: #545454;
$twiki-gray: #bdbdbd;
$light-gray: #cecdcd;
$disable-gray: #303030; // Disabled button text colour, where $twiki-gray is the background colour

$black: #000;
$white: #fff;
Expand All @@ -37,9 +69,14 @@ $white: #fff;
/**
Links
*/
$link-color: $blue;
$link-color--hover: $navy;
$link-color--visited: $purple;
$link-color: $brand-60;
$link-color--active: $brand-70;
$link-color--hover: $brand-55;
$link-color--visited: $brand-80;

$accent-color: $accent-60;
$accent-color--hover: $accent-65;
$accent-color--active: $accent-80;



Expand All @@ -54,16 +91,23 @@ $off-focus-color: #ffdc0026;
/**
Borders
*/
$border-color: $twiki-gray;
$input-border-color: $storm-gray;
$border-color: $neutral-30;
$input-border-color: $neutral-50;



/**
Contextual colours (meets WCAG AA for regular text against $off-white,
so also safe for borders)
Semantics - used sparingly and purposefully
*/
$error-color: #b83123;
$info-color: #235bd1;
$success-color: #17731d;
$warning-color: #965203;
$error-bg-color: #fef1f1;
$error-border-color: #f85156;
$error-color: #a4141b;
$info-bg-color: #e9f6ff;
$info-border-color: #1b90f4;
$info-color: #063a69;
$success-bg-color: #d6fedc;
$success-border-color: #2dc158;
$success-color: #115f28;
$warning-bg-color: #fef3da;
$warning-border-color: #c3a62c;
$warning-color: #605111;
26 changes: 12 additions & 14 deletions assets-src/styles/sass/30-base/_buttons-and-links.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@ button,
input[type="submit"].button {
align-items: center;
align-self: start; /* 4 */
background-color: $link-color;
border: solid 2px $link-color;
background-color: $accent-color;
border: solid 2px $accent-color;
border-radius: rem(6);
color: $off-white;
display: inline-flex;
Expand All @@ -74,9 +74,8 @@ input[type="submit"].button {
padding-inline: 0.75em;

&:hover {
background-color: $link-color--hover;
border-color: $link-color--hover;
color: $off-white;
background-color: $accent-color--hover;
border-color: $accent-color--hover;
}

&:active,
Expand All @@ -98,10 +97,10 @@ input[type="submit"].button {
// Alternative button style with a visible border
.button--alt.button--alt {
background-color: transparent;
color: $link-color;
color: $accent-color;

&:hover {
background-color: $link-color--hover;
background-color: $accent-color--hover;
color: $off-white;
}

Expand Down Expand Up @@ -142,17 +141,16 @@ input[type="submit"].button {
button[disabled],
.button[disabled],
.button.js-disabled {
background-color: $twiki-gray;
border-color: $twiki-gray;
box-shadow: none;
color: $disable-gray;
cursor: not-allowed;
background-color: $neutral-50;
border-color: $neutral-50;
color: $off-black;
cursor: not-allowed;

&:hover,
&:focus,
&:active {
background-color: $twiki-gray;
color: $disable-gray;
background-color: $neutral-50;
color: $off-black;
outline: 0;
}
}
6 changes: 3 additions & 3 deletions assets-src/styles/sass/30-base/_flow-elements.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ small,

hr {
border: 0;
border-block-start: 1px solid $twiki-gray;
border-block-start: 1px solid $neutral-30;
block-size: 0;
margin: rem(32) 0;
overflow: visible;
Expand Down Expand Up @@ -115,9 +115,9 @@ kbd {
}

code {
background-color: $off-black;
background-color: $neutral-90;
border-radius: rem(4);
color: $off-white;
color: $neutral-10;
}

kbd {
Expand Down
2 changes: 1 addition & 1 deletion assets-src/styles/sass/30-base/_quotes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ blockquote {
position: relative;

&::before {
background-color: $twiki-gray;
background-color: $neutral-50;
block-size: 100%;
content: "";
inline-size: rem(3);
Expand Down
2 changes: 1 addition & 1 deletion assets-src/styles/sass/30-base/_tables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ table {


tr:nth-child(even) {
background-color: rgba($light-gray, 0.5);
background-color: rgba($neutral-30, 0.5);
}


Expand Down
8 changes: 5 additions & 3 deletions assets-src/styles/sass/35-forms/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ End of resets for the fieldset element


form > * + *,
fieldset > * + *,
.field-group > * + * {
margin-block-start: 1.75rem;
}
Expand All @@ -35,9 +36,10 @@ form > * + *,
}


legend,
.field-group__heading {
@include text-22;
font-weight: bold;
font-weight: $emphasis;
}


Expand Down Expand Up @@ -88,14 +90,14 @@ label,

.field-hint {
@include text-17;
color: $storm-gray;
color: $neutral-70;
margin-block-end: 0.25rem;
max-inline-size: rem($text-measure);
}


.required {
color: $storm-gray;
color: $neutral-70;
font-weight: normal;
}

Expand Down
2 changes: 1 addition & 1 deletion assets-src/styles/sass/35-forms/_segmented-options.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@

// Input with hover
> * > *:hover label {
background-color: $twiki-gray;
background-color: $neutral-30;
}

// Input with focus
Expand Down
2 changes: 1 addition & 1 deletion assets-src/styles/sass/50-core-components/_avatars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
.avatar {
background-color: $off-white;
block-size: rem(100);
border: solid 1px $blue;
border: solid 1px $brand-60;
border-radius: 50%;
inline-size: rem(100);
overflow: hidden;
Expand Down
8 changes: 4 additions & 4 deletions assets-src/styles/sass/50-core-components/_notes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,22 +18,22 @@


.note--error {
border-color: $error-color;
border-color: $error-border-color;
}


.note--info {
border-color: $info-color;
border-color: $info-border-color;
}


.note--success {
border-color: $success-color;
border-color: $success-border-color;
}


.note--warning {
border-color: $warning-color;
border-color: $warning-border-color;
}


Expand Down
6 changes: 3 additions & 3 deletions assets-src/styles/sass/50-core-components/_progress-indicator.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
position: relative;

&::after {
background-color: $storm-gray;
background-color: $neutral-70;
block-size: rem(13);
inline-size: rem(3);
inset-block-end: rem(-16);
Expand Down Expand Up @@ -91,7 +91,7 @@
align-items: center;
background-color: $off-white;
block-size: rem(44);
border: solid 3px $storm-gray;
border: solid 3px $neutral-70;
border-radius: 50%;
display: flex;
inline-size: rem(44);
Expand Down Expand Up @@ -138,7 +138,7 @@


.progress-list a {
color: $storm-gray;
color: $neutral-70;
text-decoration-skip: auto; // Supported by Safari
text-decoration-skip-ink: auto; // Not supported by Safari

Expand Down
4 changes: 2 additions & 2 deletions assets-src/styles/sass/50-core-components/_quotes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
position: relative;

&::before {
background-color: $blue;
background-color: $brand-60;
block-size: 100%;
border-radius: rem(5);
content: '';
Expand All @@ -20,7 +20,7 @@
}

> *:not(footer) {
color: $blue;
color: $brand-60;
font-weight: bold;
}

Expand Down
4 changes: 2 additions & 2 deletions assets-src/styles/sass/50-core-components/_tag-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@

.tag {
@include text-17;
background-color: $twiki-gray;
background-color: $neutral-60;
border-radius: rem(4);
color: $off-black;
color: $white;
display: inline-block;
outline: 1px solid transparent; /* 1 */
outline-offset: -1px; /* 1 */
Expand Down
6 changes: 3 additions & 3 deletions assets-src/styles/sass/70-third-party-plugins/_s24-accessible-autocomplete.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@


.autocomplete__hint {
color: $twiki-gray;
color: $neutral-30;
}


Expand Down Expand Up @@ -53,7 +53,7 @@
}

.autocomplete__option--odd {
background-color: $twiki-gray;
background-color: $neutral-20;
}


Expand All @@ -65,7 +65,7 @@


.autocomplete__option--no-results {
background-color: $twiki-gray;
background-color: $neutral-30;
color: $off-black;
}

Expand Down
Loading

0 comments on commit 3f34397

Please sign in to comment.