Skip to content

Commit

Permalink
More tweaks to colour
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahosgood
ahosgood committed Nov 22, 2023
1 parent cea5332 commit ec7cdf4
Show file tree
Hide file tree
Showing 8 changed files with 239 additions and 135 deletions.
27 changes: 27 additions & 0 deletions .storybook/storybook.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

@use "../src/nationalarchives/tools/colour";
@use "../src/nationalarchives/tools/media";
@use "../src/nationalarchives/tools/typography";

@import "https://use.typekit.net/hkj3kuz.css";

Expand Down Expand Up @@ -149,7 +150,10 @@
}

.tna-colour-contrast-demo {
width: 0;
max-width: calc(100% - 1px);
display: table;
table-layout: auto;

border-top: rgb(0 0 0/0.25) 1px solid;
border-left: rgb(0 0 0/0.25) 1px solid;
Expand All @@ -164,6 +168,8 @@

display: table-cell;

@include typography.main-font-weight-bold;

border-right: rgb(0 0 0/0.25) 1px solid;
border-bottom: rgb(0 0 0/0.25) 1px solid;
}
Expand All @@ -182,6 +188,12 @@
border-right: rgb(0 0 0/0.25) 1px solid;
border-bottom: rgb(0 0 0/0.25) 1px solid;

&:first-child {
padding: 1rem;

@include typography.relative-font-size(14);
}

&-content {
height: 100%;
padding: 1rem;
Expand All @@ -196,9 +208,24 @@

.tna-template {
min-width: 15.25rem;

p:not(:first-child) {
margin-top: 0.25rem;
}
}

.tna-chip {
margin: 1rem 0;
}

.tna-button-group {
margin-top: 1rem;

gap: 0.5rem;
flex-wrap: nowrap;
}

.tna-pagination {
margin-top: 1rem;
}
}
16 changes: 13 additions & 3 deletions src/nationalarchives/components/button/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,14 +86,22 @@
}
}

&--solid-hover,
.tna-background-accent-light &,
.tna-background-accent &:not(.tna-button--accent) {
&--solid-hover/*,
// .tna-background-accent-light &,
.tna-background-accent &:not(.tna-button--accent)*/ {
&:not(.tna-button--plain):hover {
@include colour.colour-font("font-dark");

@include colour.colour-background("page-background");
}
}

.tna-background-accent & {
&:hover {
@include colour.colour-font("font-dark");
}
}

.tna-background-accent &--accent {
@include colour.plain;

Expand All @@ -109,8 +117,10 @@

&:hover {
@include colour.colour-font("page-background");
// @include colour.colour-font("accent-font-dark");

@include colour.colour-background("font-dark");
// background-color: transparent;
}
}

Expand Down
94 changes: 0 additions & 94 deletions src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js
View file

This file was deleted.

146 changes: 143 additions & 3 deletions src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,9 @@ const Template = ({ theme, accent }) => {
? "tna-template--dark-theme tna-template--high-contrast-theme"
: ""
} ${
accent === "black"
/*accent === "black"
? "tna-template--black-accent"
: accent === "yellow"
: */ accent === "yellow"
? "tna-template--yellow-accent"
: accent === "pink"
? "tna-template--pink-accent"
Expand Down Expand Up @@ -258,7 +258,6 @@ const Template = ({ theme, accent }) => {
params: {
text: "Primary button",
href: "#",
classes: "tna-button--solid-hover",
},
})}
</div>
Expand Down Expand Up @@ -1204,3 +1203,144 @@ DarkHighContrast.args = {
theme: "dark high-contrast",
accent: "pink",
};

const CombinationsTemplate = () => {
const themes = [
"tna-template--light-theme",
"tna-template--light-theme tna-template--high-contrast-theme",
"tna-template--dark-theme",
"tna-template--dark-theme tna-template--high-contrast-theme",
];

const accents = [
"",
// "tna-template--black-accent",
"tna-template--yellow-accent",
"tna-template--pink-accent",
"tna-template--orange-accent",
"tna-template--green-accent",
"tna-template--blue-accent",
];

const blocks = [
"",
"tna-background-tint",
"tna-background-accent-light",
"tna-background-accent",
"tna-background-contrast",
];

return `<div class="tna-colour-contrast-demo">
<div class="tna-colour-contrast-demo__header">
<div class="tna-colour-contrast-demo__block">
Blocks
</div>
${blocks.reduce(
(blockOutput, block) =>
`${blockOutput}<div class="tna-colour-contrast-demo__block">
${block.replace(/^tna-background-/, "") || "Base"}
</div>`,
"",
)}
</div>
<div class="tna-colour-contrast-demo__examples">
${themes.reduce(
(themeOutput, theme) =>
`${themeOutput}${accents.reduce(
(
accentOutput,
accent,
) => `${accentOutput}<div class="tna-colour-contrast-demo__theme-accent">
<div class="tna-colour-contrast-demo__example">
<p>Theme: <strong>${theme
.replace(/tna-template--/g, "")
.replace(/-theme/g, "")}</strong></p>
<p>Accent: <strong>${
accent.replace(/tna-template--/g, "").replace(/-accent/g, "") ||
"No accent"
}</strong></p>
</div>
${blocks.reduce(
(blockOutput, block) =>
`${blockOutput}<div class="tna-colour-contrast-demo__example tna-template ${theme} ${accent}">
<div class="tna-template__body">
<div class="tna-colour-contrast-demo__example-content ${block}">
<p>Text</p>
<p><a href="#">Link</a> / <a href="#" class="tna-colour-contrast-demo__link--visited">Link (visited)</a></p>
<span class="tna-chip">Chip</span>
<div class="tna-button-group">
${Button({
params: {
text: "Button",
small: true,
},
})}
${Button({
params: {
text: "Button",
small: true,
accent: true,
},
})}
${Button({
params: {
text: "Button",
small: true,
plain: true,
},
})}
<!--${Button({
params: {
text: "Button",
accent: true,
class: "tna-button--solid-hover",
},
})}-->
</div>
<!--${Pagination({
params: {
previous: {
href: "#",
},
items: [
{
number: 1,
href: "#",
},
{
ellipsis: true,
},
{
number: 7,
current: true,
href: "#",
},
{
ellipsis: true,
},
{
number: 42,
href: "#",
},
],
next: {
href: "#",
},
},
})}-->
</div>
</div>
</div>`,
"",
)}
</div>`,
"",
)}`,
"",
)}
</div>
</div>`;
};

export const Combinations = CombinationsTemplate.bind({});
Combinations.args = {};
Loading

0 comments on commit ec7cdf4

Please sign in to comment.