From f3619f201fe91e26b9aab7c802e02741a0695088 Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Mon, 18 Dec 2023 11:38:33 +0100 Subject: [PATCH 01/29] SWED-2276 import & adapt for atlas icons --- src/App/AppHeader/index.js | 14 +- .../components/Alerts/constants.js | 45 +-- .../components/Alerts/index.js | 6 +- src/App/Home/index.js | 4 +- src/App/components/ActionList/index.js | 4 +- src/App/components/Alert/index.js | 6 +- src/App/utils/SearchBox/index.js | 12 +- src/less/components/accordion.less | 21 +- src/less/components/action-list.less | 5 +- src/less/components/alert.less | 42 ++- src/less/components/badge.less | 14 +- src/less/components/breadcrumb.less | 4 +- src/less/components/button.less | 3 +- src/less/components/checkbox.less | 10 +- src/less/components/dropdown.less | 5 +- src/less/components/expandable.less | 4 +- src/less/components/form.less | 3 +- src/less/components/links.less | 1 + src/less/components/lists.less | 3 +- src/less/components/media-object.less | 24 +- src/less/components/nav.less | 6 +- src/less/components/payex/links.less | 13 +- src/less/components/payex/progress-step.less | 17 +- src/less/components/payex/sidebar.less | 5 +- src/less/components/payex/toast.less | 8 +- src/less/components/radio.less | 18 +- src/less/components/sidebar.less | 3 +- src/less/components/tabs.less | 2 +- src/less/components/toast.less | 32 +- src/less/components/topbar-experimental.less | 3 +- src/less/components/topbar.less | 23 +- src/less/core/iconography.less | 351 ++++++++++++++++-- src/less/core/typography.less | 39 +- src/less/documentation-payex.less | 57 +-- src/less/documentation-swedbankpay.less | 44 +-- src/less/global.less | 20 +- src/less/variables-payex.less | 51 ++- src/less/variables-swedbankpay.less | 8 + 38 files changed, 627 insertions(+), 303 deletions(-) diff --git a/src/App/AppHeader/index.js b/src/App/AppHeader/index.js index 592b7eb7cd..cc8e496929 100644 --- a/src/App/AppHeader/index.js +++ b/src/App/AppHeader/index.js @@ -39,9 +39,7 @@ const AppHeader = () => aria-label="Close menu" title="Close menu" > - +
@@ -54,9 +52,7 @@ const AppHeader = () =>
@@ -70,7 +66,7 @@ const AppHeader = () => aria-expanded="false" aria-controls="topbar-nav" > - menu + @@ -87,10 +83,10 @@ const AppHeader = () => aria-expanded="false" aria-controls="topbar-nav" > - menu + {"\n"} diff --git a/src/App/ComponentsDocumentation/components/Alerts/constants.js b/src/App/ComponentsDocumentation/components/Alerts/constants.js index 949e3dc97b..1925138029 100644 --- a/src/App/ComponentsDocumentation/components/Alerts/constants.js +++ b/src/App/ComponentsDocumentation/components/Alerts/constants.js @@ -15,7 +15,11 @@ export const alertsShowCase = { { tab: "Danger", component: ( - + ), options: { checkbox: [ @@ -67,7 +71,7 @@ export const alertsShowCase = { component: ( ), @@ -96,7 +100,7 @@ export const alertsShowCase = { component: ( ), @@ -122,38 +126,3 @@ export const alertsShowCase = { }, ], }; -// Will be restored at a later stage - -// export const alertsGlobalShowCase = { -// id: "overviewAlertGlobal", -// hideOptions: true, -// tabsId: "overviewAlertGlobalTabs", -// elements: [ -// { -// tab: "Warning", -// component: Login problems: We are currently experiencing high numbers of login failures. We are working on solving the problem as quick as possible.

} />, -// options: { -// checkbox: [ -// { -// inputs: [] -// } -// ] -// }, -// title: "Global warning alert", -// description: "Use this alert to broadcast a problem concerning the the entire system." -// }, -// { -// tab: "Informative", -// component: Planned maintenance: Friday 16:00 - 18:00 you will not be able to log into our service. We apologize form the inconvenience in advance.

}/>, -// options: { -// checkbox: [ -// { -// inputs: [] -// } -// ] -// }, -// title: "Global informative alert", -// description: "Use this alert to broadcast information concerning the entire system." -// } -// ] -// }; diff --git a/src/App/ComponentsDocumentation/components/Alerts/index.js b/src/App/ComponentsDocumentation/components/Alerts/index.js index 2c9834a7e2..6050ca779a 100644 --- a/src/App/ComponentsDocumentation/components/Alerts/index.js +++ b/src/App/ComponentsDocumentation/components/Alerts/index.js @@ -58,7 +58,7 @@ const HowTo = () => ( Do Best practices: To minimize the risk for a challenge request, @@ -90,7 +90,7 @@ const HowTo = () => (
Best practices: To minimize the risk for a challenge @@ -137,7 +137,7 @@ const ContentGuidelines = () => (
Error title: Content text link diff --git a/src/App/Home/index.js b/src/App/Home/index.js index 098bd7b5c6..95737afaf1 100644 --- a/src/App/Home/index.js +++ b/src/App/Home/index.js @@ -27,6 +27,8 @@ const Home = () => {
Welcome to the {brandTitle} Design Guide + +
@@ -44,7 +46,7 @@ const Home = () => { .filter((route) => isSwedbankPay ? !route.title.toLowerCase().includes("patterns") - : !route.title.toLowerCase().includes("playbook") + : !route.title.toLowerCase().includes("playbook"), ) .map((route) => ( diff --git a/src/App/components/ActionList/index.js b/src/App/components/ActionList/index.js index abbc1d5cae..e63124b45b 100644 --- a/src/App/components/ActionList/index.js +++ b/src/App/components/ActionList/index.js @@ -13,7 +13,7 @@ const ActionListToggle = () => ( aria-haspopup="true" > {"\n"} - more_vert + {"\n"} {"\n"} @@ -57,7 +57,7 @@ ActionList.propTypes = { PropTypes.shape({ name: PropTypes.string.isRequired, icon: PropTypes.string, - }) + }), ).isRequired, }; diff --git a/src/App/components/Alert/index.js b/src/App/components/Alert/index.js index 4d5002f77f..0eddfbc7fa 100644 --- a/src/App/components/Alert/index.js +++ b/src/App/components/Alert/index.js @@ -6,15 +6,13 @@ const Alert = ({ id, type, icon, close, text, className }) => { const alertClasses = classnames( "alert", `alert-${type}`, - className ? className : null + className ? className : null, ); return (
{"\n"} - + {text} {"\n"} {close ? ( diff --git a/src/App/utils/SearchBox/index.js b/src/App/utils/SearchBox/index.js index f55d10af51..a6b36731c5 100644 --- a/src/App/utils/SearchBox/index.js +++ b/src/App/utils/SearchBox/index.js @@ -9,7 +9,7 @@ const modify = (result, searchTerm) => { .split("") .map((x) => x.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&")) .join("[.\\s.]*"), - "ig" + "ig", ); return result.replace(re, "$&"); @@ -28,7 +28,7 @@ const SearchBox = ({ className, mobile }) => { } else if (val.title.toLowerCase().includes(searchTerm.toLowerCase())) { return val; } - }) + }), ); return ( @@ -55,7 +55,7 @@ const SearchBox = ({ className, mobile }) => { - )) + )), )} ); @@ -164,7 +164,7 @@ const SearchBox = ({ className, mobile }) => { onClick={() => clearSearchTerm()} className="btn btn-icon btn-sm" > - close + ) : ( )}
@@ -207,7 +207,7 @@ const SearchBox = ({ className, mobile }) => { K - search +
diff --git a/src/less/components/accordion.less b/src/less/components/accordion.less index 877e4a0a16..902fb86e8e 100644 --- a/src/less/components/accordion.less +++ b/src/less/components/accordion.less @@ -2,12 +2,14 @@ .accordion { border: 1px solid transparent; - border-bottom: 1px solid @brand-secondary-light-3; + border-bottom: 1px solid var(--brand-secondary-light-3); border-radius: 2px; background-color: transparent; display: flex; flex-direction: column; - transition: all 0.3s ease-in-out, height 0.3s ease; + transition: + all 0.3s ease-in-out, + height 0.3s ease; &:last-child { margin-bottom: 0; @@ -20,10 +22,10 @@ } &.accordion-open { - background-color: @white; + background-color: var(--white); &:first-child { - border-top: 1px solid @brand-secondary-light-3; + border-top: 1px solid var(--brand-secondary-light-3); } > .accordion-header { @@ -44,18 +46,23 @@ flex-direction: column; align-items: flex-start; user-select: none; - color: @brand-secondary; - background-color: @white; + color: var(--brand-secondary); + background-color: var(--white); padding: 1rem; text-align: start; font-weight: var(--font-weight-bold); font-family: var(--brand-headline); font-size: 1rem; + // TODO: is this still necessary? if looks fine on chrome + ff + safari then only keep for material-icons + // it seems that it's adding automatically the desired icon via :before trigering content to set the icon. Maybe hard to replace with Atlas? + // eventually can keep it silently, and move away from it during next major release when bring new accordion + // it doesn't require anything from users anyway since the icon is set on our side. So can change relaxed since the icon is not exposed but set on our side via CSS via :before + // a possibility: replace by :before & :after with pure CSS &:before { .material-icons-styling(); - color: @brand-secondary; + color: var(--brand-secondary); content: "keyboard_arrow_down"; position: absolute; right: 0; diff --git a/src/less/components/action-list.less b/src/less/components/action-list.less index 5b3b983833..142d110839 100644 --- a/src/less/components/action-list.less +++ b/src/less/components/action-list.less @@ -24,7 +24,8 @@ align-items: center; color: var(--brand-secondary); - > .material-icons { + > .material-icons, + > :is(i[class^="at-"], i[class*=" at-"]) { margin-right: 0.5rem; } @@ -52,7 +53,7 @@ border: 0; outline: 0; - &:not(.material-icons) { + &:not(.material-icons, i[class^="at-"], i[class*=" at-"]) { padding: 0.7rem; } diff --git a/src/less/components/alert.less b/src/less/components/alert.less index 236de5c719..9a7c5024ec 100644 --- a/src/less/components/alert.less +++ b/src/less/components/alert.less @@ -1,37 +1,47 @@ @import "../global.less"; -.alert-variant(@color, @bg-color) { - background-color: @bg-color; - - .alert-icon { - color: @color; - margin-right: 1rem; - } -} - .alert { + --color-icon: var(--brand-info); + --color-bg: var(--brand-info-light); + padding: 1rem; position: relative; margin-top: 0; margin-bottom: 1rem; display: flex; - color: @black; + // TODO: check if gap instead or margin breaks design. For both the icon ANF the optional close button on the right side. + // - does it display same gap? + // - does it display a spacing when no icon and no close button? + // IF all good then only keep gap and remove margin-right of icon & margin-left of close button + gap: 1rem; + color: var(--black); border-radius: 0.25rem; + background-color: var(--color-bg); + + & i { + color: var(--color-icon); + // TODO: remove if gap is enough ? but since gap different for close button then probably not + margin-right: 1rem; + } &.alert-success { - .alert-variant(@brand-success, @brand-success-light); + --color-icon: var(--system-success); + --color-bg: var(--system-success-light); } &.alert-warning { - .alert-variant(@brand-warning, @brand-warning-light); + --color-icon: var(--system-warning); + --color-bg: var(--system-warning-light); } &.alert-danger { - .alert-variant(@brand-error, @brand-error-light); + --color-icon: var(--system-error); + --color-bg: var(--system-error-light); } &.alert-informative { - .alert-variant(@brand-info, @brand-info-light); + --color-icon: var(--system-info); + --color-bg: var(--system-info-light); } > p { @@ -45,14 +55,14 @@ margin-left: 0.5rem; &:hover { - background-color: @brand-bg-gray; + background-color: var(--bg-grey); } .close-button(); &:focus { border: none; border-radius: 0.125rem; - box-shadow: 0 0 0 2px @black; + box-shadow: 0 0 0 2px var(--black); outline: 2px solid; } } diff --git a/src/less/components/badge.less b/src/less/components/badge.less index fe37686248..89a9ea7c14 100644 --- a/src/less/components/badge.less +++ b/src/less/components/badge.less @@ -42,7 +42,7 @@ .badge { display: inline-block; - color: @white; + color: var(--white); padding: 0 0.4em; /* stylelint-disable-line */ /* Using em for variable padding based on font-size of badge [AW] */ border-radius: 2rem; font-size: 0.875rem; @@ -59,7 +59,10 @@ } }); - .material-icons { + // TODO: ask designers: should we keep this? should people use icons in badge? + // If not then remove it and communicate it as breaking change + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { font-size: 1rem; vertical-align: text-top; } @@ -80,13 +83,13 @@ &.badge-green-light, &.badge-blue-light, &.badge-default { - color: @brand-secondary; + color: var(--brand-secondary); } &.badge-deprecated { font-weight: 700; background-color: @system-error; - color: @white; + color: var(--white); } &.badge-number { @@ -143,7 +146,8 @@ } } - .material-icons { + .material-icons, + &:is([class^="at-"], [class*=" at-"]) { font-size: 1.25rem; margin-right: 0.5rem; } diff --git a/src/less/components/breadcrumb.less b/src/less/components/breadcrumb.less index 58d9c50788..c1436d786e 100644 --- a/src/less/components/breadcrumb.less +++ b/src/less/components/breadcrumb.less @@ -32,6 +32,7 @@ ol.breadcrumb { } } + // TODO: not by issue since not exposed, but replace by pure CSS lines &:after { content: "chevron_right"; @@ -39,7 +40,8 @@ ol.breadcrumb { } } - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { font-size: 1rem; vertical-align: text-top; } diff --git a/src/less/components/button.less b/src/less/components/button.less index c1e7d59d15..4d56aad7f4 100644 --- a/src/less/components/button.less +++ b/src/less/components/button.less @@ -187,7 +187,8 @@ } .material-icons, - .material-icons-outlined { + .material-icons-outlined, + :is(i[class^="at-"], i[class*=" at-"]) { font-size: 1.25rem; position: relative; display: inline-block; diff --git a/src/less/components/checkbox.less b/src/less/components/checkbox.less index 3f88916f42..796edbdf10 100644 --- a/src/less/components/checkbox.less +++ b/src/less/components/checkbox.less @@ -38,7 +38,7 @@ top: 1px; height: @checkbox-height; width: @checkbox-width; - background-color: @white; + background-color: var(--white); border: 2px solid @brand-secondary-light-2; border-radius: 2px; } @@ -52,7 +52,7 @@ top: 1px; height: @checkbox-height; width: @checkbox-width; - background-color: @white; + background-color: var(--white); border-radius: 50%; } @@ -66,12 +66,12 @@ &:focus + label:before { box-shadow: 0 0 0 0.375rem @brand-secondary-light-3; - border-color: @brand-secondary; + border-color: var(--brand-secondary); outline: 4px solid transparent; } &:focus + label:after { - border-color: @brand-secondary; + border-color: var(--brand-secondary); outline: 4px solid transparent; } @@ -81,7 +81,7 @@ } &:hover + label:after { - border-color: @brand-secondary; + border-color: var(--brand-secondary); } &[disabled] { diff --git a/src/less/components/dropdown.less b/src/less/components/dropdown.less index 3e0067a8d5..67e0aa6ced 100644 --- a/src/less/components/dropdown.less +++ b/src/less/components/dropdown.less @@ -105,7 +105,8 @@ border-radius: 4px; cursor: pointer; - > .material-icons { + > .material-icons, + > :is(i[class^="at-"], i[class*=" at-"]) { margin-right: 0.5rem; } @@ -165,7 +166,7 @@ border: 0; outline: 0 solid var(--brand-secondary); - &:not(.material-icons) { + &:not(.material-icons, i[class^="at-"], i[class*=" at-"]) { padding: 0.7rem; } diff --git a/src/less/components/expandable.less b/src/less/components/expandable.less index 6ad1cd6025..3c3f2d64dd 100644 --- a/src/less/components/expandable.less +++ b/src/less/components/expandable.less @@ -72,7 +72,8 @@ gap: 0 1rem; } - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { grid-area: icon; } @@ -85,6 +86,7 @@ margin: 0; position: relative; + // TODO: replace by pure CSS. Not issue since not exposed to users anyway &:before { .material-icons-styling(@margin: 0 1rem); diff --git a/src/less/components/form.less b/src/less/components/form.less index 5e931b9b01..c9e7760e82 100644 --- a/src/less/components/form.less +++ b/src/less/components/form.less @@ -55,7 +55,8 @@ label { } } - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { color: @brand-accent-links; } } diff --git a/src/less/components/links.less b/src/less/components/links.less index f3bd2e517d..7c1054f972 100644 --- a/src/less/components/links.less +++ b/src/less/components/links.less @@ -120,6 +120,7 @@ a { border-radius: 0.25rem 0 0 0.25rem; } + // TODO: replace by pure CSS &:after { content: "arrow_forward"; .material-icons-styling(); diff --git a/src/less/components/lists.less b/src/less/components/lists.less index a3c7497d3c..d0b38f5f9e 100644 --- a/src/less/components/lists.less +++ b/src/less/components/lists.less @@ -63,7 +63,8 @@ li { display: flex; - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { margin-right: 0.5rem; } } diff --git a/src/less/components/media-object.less b/src/less/components/media-object.less index a966236606..bfcb7d9f5b 100644 --- a/src/less/components/media-object.less +++ b/src/less/components/media-object.less @@ -8,7 +8,13 @@ .media-img { display: flex; - > :is(img, .material-icons, .material-icons-outlined) { + > :is( + img, + .material-icons, + .material-icons-outlined, + i[class^="at-"], + i[class*=" at-"] + ) { width: 48px; height: 48px; font-size: 3rem; @@ -17,7 +23,13 @@ &.media-sm { .media-img { - > :is(img, .material-icons, .material-icons-outlined) { + > :is( + img, + .material-icons, + .material-icons-outlined, + i[class^="at-"], + i[class*=" at-"] + ) { width: 40px; height: 40px; font-size: 2.5rem; @@ -27,7 +39,13 @@ &.media-lg { .media-img { - > :is(img, .material-icons, .material-icons-outlined) { + > :is( + img, + .material-icons, + .material-icons-outlined, + i[class^="at-"], + i[class*=" at-"] + ) { width: 56px; height: 56px; font-size: 3.5rem; diff --git a/src/less/components/nav.less b/src/less/components/nav.less index 4c21a17b13..6ff50151d6 100644 --- a/src/less/components/nav.less +++ b/src/less/components/nav.less @@ -112,7 +112,8 @@ } } - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { color: @brand-secondary; user-select: none; } @@ -382,7 +383,8 @@ } } - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { margin-right: var(--base-margin); font-size: 24px; } diff --git a/src/less/components/payex/links.less b/src/less/components/payex/links.less index 90d3187346..609299e85c 100644 --- a/src/less/components/payex/links.less +++ b/src/less/components/payex/links.less @@ -8,12 +8,12 @@ a { } &:focus { - color: @brand-primary; + color: var(--brand-primary); } &.icon-link { &:hover { - color: @brand-primary; + color: var(--brand-primary); span { text-decoration: none; @@ -29,21 +29,22 @@ a { } &.action-link { + // TODO: replace by local svg &:after { - color: @brand-secondary; + color: var(--brand-secondary); content: "arrow_forward"; - font-family: var(--payex-material-icons); + font-family: var(--icons-font-material-default); font-size: 1.5rem; top: calc(50% - 1.5rem / 2); } &:hover { - color: @brand-secondary; + color: var(--brand-secondary); } &.action-link-new-tab { &:before { - background-color: @brand-primary; + background-color: var(--brand-primary;); } } } diff --git a/src/less/components/payex/progress-step.less b/src/less/components/payex/progress-step.less index 472ba633eb..381529ae9c 100644 --- a/src/less/components/payex/progress-step.less +++ b/src/less/components/payex/progress-step.less @@ -1,15 +1,8 @@ @import "../progress-steps.less"; -.steps { - ol { - li { - &.steps-completed { - .material-icons { - &.steps-icon { - color: @white; - } - } - } - } - } +.steps + ol + li.steps-completed + .steps-icon:is(i, [class^="at-"], [class*=" at-"], .material-icons) { + color: var(--white); } diff --git a/src/less/components/payex/sidebar.less b/src/less/components/payex/sidebar.less index c92452a980..9796b1eb31 100644 --- a/src/less/components/payex/sidebar.less +++ b/src/less/components/payex/sidebar.less @@ -6,8 +6,11 @@ .main-nav-li { a { i { + // TODO: is this actually needed ? + // else remove it. + // Or make sure the globally when .material-icons-outlined then well material-icons-outlined is triggered in CSS &.material-icons-outlined { - font-family: var(--payex-material-icons); + font-family: var(--icons-font-material-outlined); } } diff --git a/src/less/components/payex/toast.less b/src/less/components/payex/toast.less index a7ab5c46ec..8d5ce7b80e 100644 --- a/src/less/components/payex/toast.less +++ b/src/less/components/payex/toast.less @@ -13,9 +13,9 @@ } } - i { - &.material-icons { - font-family: "Material Icons"; - } + // TODO: is it actually needed ? why ? is it to make sure it's material icons normal and NOT material icons OUTLINED ? + // maybe we can remove it + i.material-icons { + font-family: "Material Icons"; } } diff --git a/src/less/components/radio.less b/src/less/components/radio.less index e56cb98628..61d4fa33bc 100644 --- a/src/less/components/radio.less +++ b/src/less/components/radio.less @@ -38,14 +38,14 @@ left: -1.5rem; height: @radio-height; width: @radio-width; - background-color: @white; + background-color: var(--white); border: 2px solid @brand-secondary-light-2; cursor: pointer; border-radius: 50%; } &:checked + label:before { - background-color: @white; + background-color: var(--white); background-repeat: no-repeat; background-image: url("../../icons/shapes/circle.svg"); border-color: @brand-secondary; @@ -66,7 +66,7 @@ } &:checked + label:before { - background-color: @white; + background-color: var(--white); background-image: url("../../icons/shapes/circle-disabled.svg"); } @@ -107,7 +107,7 @@ } label { - outline: 1px solid @black; + outline: 1px solid var(--black); border-radius: var(--border-radius, 8px); margin: auto; height: 100%; @@ -120,8 +120,8 @@ display: none; } - label .material-icons { - color: @white; + label :is(i[class^="at-"], i[class*=" at-"], .material-icons) { + color: var(--white); margin-left: -10px; } @@ -136,13 +136,13 @@ input[type="radio"]:checked + label { background-color: @brand-secondary; border-radius: var(--border-radius, 8px); - color: @white; + color: var(--white); padding-left: 1.875rem; } input[type="radio"]:checked:hover + label { background-color: @medium-brown; - color: @white; + color: var(--white); } input[type="radio"]:disabled + label { @@ -152,7 +152,7 @@ input[type="radio"]:checked:disabled + label { background-color: @light-brown; - color: @white; + color: var(--white); outline: 0; padding-left: 1.25rem; diff --git a/src/less/components/sidebar.less b/src/less/components/sidebar.less index bd9ceeabf6..610f959daf 100644 --- a/src/less/components/sidebar.less +++ b/src/less/components/sidebar.less @@ -353,7 +353,8 @@ } } - .material-icons-outlined { + .material-icons-outlined, + :is(i[class^="at-"], i[class*=" at-"]) { border: 1px solid; } } diff --git a/src/less/components/tabs.less b/src/less/components/tabs.less index b045b3b439..ee6c7ee836 100644 --- a/src/less/components/tabs.less +++ b/src/less/components/tabs.less @@ -51,7 +51,7 @@ linear-gradient( to right, rgba(255, 255, 255, 0.35), - @white 68%, + var(--white) 68%, rgba(255, 255, 255, 0.8) ); background-repeat: no-repeat; diff --git a/src/less/components/toast.less b/src/less/components/toast.less index 0c7b6a493f..38917cd360 100644 --- a/src/less/components/toast.less +++ b/src/less/components/toast.less @@ -21,6 +21,8 @@ } .toast { + --color-icon: var(--black); + position: relative; display: flex; min-height: @toast-height; @@ -66,30 +68,26 @@ margin-top: 10px; } + > i { + color: var(--color-icon); + } + &.toast-success { - .material-icons { - color: @brand-success; - } + --color-icon: var(--system-success); } &.toast-neutral { - .material-icons { - color: @brand-info; - } + --color-icon: var(--system-info); } &.toast-warning { - .material-icons { - color: @brand-warning; - } + --color-icon: var(--system-warning); } &.toast-danger { - color: var(--brand-error); + --color-icon: var(--system-error); - .material-icons { - color: var(--brand-error); - } + color: var(--brand-error); } .toast-content { @@ -98,7 +96,7 @@ } } - .material-icons { + i { user-select: none; margin-right: calc(var(--base-margin-sm) * 2); margin-left: calc(0 - var(--base-margin-sm)); @@ -110,7 +108,7 @@ height: 1.75rem; order: 1; - .material-icons { + i { display: flex; align-items: center; justify-content: center; @@ -130,7 +128,7 @@ } &:focus { - .material-icons { + i { border: 2px solid @brand-secondary; } } @@ -161,7 +159,7 @@ .toast-close { &:focus { - .material-icons { + i { outline: 2px solid; &:hover { diff --git a/src/less/components/topbar-experimental.less b/src/less/components/topbar-experimental.less index 40cdfff640..6f735f21a4 100644 --- a/src/less/components/topbar-experimental.less +++ b/src/less/components/topbar-experimental.less @@ -165,7 +165,8 @@ .topbar-link-right { margin: initial; - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { margin: 0; } } diff --git a/src/less/components/topbar.less b/src/less/components/topbar.less index bffc0a3e00..f06eb945f8 100644 --- a/src/less/components/topbar.less +++ b/src/less/components/topbar.less @@ -131,7 +131,8 @@ } } - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { margin: 0; } } @@ -351,7 +352,8 @@ } } - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { margin: 0; } } @@ -384,7 +386,7 @@ margin-left: 1rem; } - .material-icons + span { + :is(i[class^="at-"], i[class*=" at-"], .material-icons) + span { margin-left: 0; } } @@ -392,7 +394,8 @@ .topbar-link-right { margin: initial; - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { margin: 0; } } @@ -440,7 +443,8 @@ line-height: 1; align-items: center; - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { padding: 0 0.5rem 0 0; user-select: none; } @@ -466,7 +470,8 @@ margin-left: auto; color: @black; - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { margin: 0; } } @@ -572,8 +577,10 @@ } &:not(.topbar-link-right) { - .material-icons, - &.material-icons { + & .material-icons, + & :is(i[class^="at-"], i[class*=" at-"]), + &.material-icons, + &:is([class^="at-"], [class*=" at-"]) { display: none; } } diff --git a/src/less/core/iconography.less b/src/less/core/iconography.less index acf730d06b..a1a5c0768c 100644 --- a/src/less/core/iconography.less +++ b/src/less/core/iconography.less @@ -1,3 +1,63 @@ +// ICONS + +i { + --icon-size: 24px; + + &.small { + --icon-size: 18px; + } + + &.large { + --icon-size: 32px; + } + + &:is([class^="at-"], [class*=" at-"]) { + font-family: var(--icons-font-default); + --ratio-font-adjust-ratio-material-atlas: 0.75; + // TODO: set the other font-size by text font-size around only as fallback, maybe requires some additional class + // TODO: try to make it so look for at- even if it's in the middle of some other CSS classes ? (maybe don't need this actually) + // TODO: add the custom icon (e.g. chevron) + // TODO: add some cached icon for booster load (e.g. hamburger, close, magnifier, ...) max 5-10 (anc che how heavy each are to actually be sure it's worth it or if CSS becomes too big + font-size: calc(1em * var(--ratio-font-adjust-ratio-material-atlas)); + + display: inline-grid; + grid-template: var(--icon-size, 24px) / var(--icon-size, 24px); + font-size: var(--icon-size, 24px); + + &:before { + place-self: center; + transform: translateY(-2%); + } + } + + &.material-icons { + font-family: var(--icons-font-material-default) !important; + } + + &:is(.material-icons-outlined, .material-icons.material-icons-outlined) { + font-family: var(--icons-font-material-outlined) !important; + } +} + +.material-icons-styling(@color: @brand-secondary, @margin: 0 0.5rem, @font-size: 1.25rem) { + color: @color; + margin: @margin; + font-family: "Material Icons"; + font-weight: normal; + font-style: normal; + font-size: @font-size; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + font-feature-settings: "liga"; +} + +// custom icons start + i.payment-icon { height: 2rem; width: 3rem; @@ -166,6 +226,9 @@ i.payment-icon { } } +// custom icons end + +// material-icons sizing start i.material-icons { &-tiny, &.tiny { @@ -190,6 +253,10 @@ i.material-icons { } } +// material-icons sizing end + +// flag icons sizing start + i.flag-icon { position: relative; display: inline-block; @@ -265,30 +332,264 @@ i.flag-icon { } } -@flag-list: ~"ad", ~"ae", ~"af", ~"ag", ~"ai", ~"al", ~"am", ~"ao", ~"aq", ~"ar", - ~"as", ~"at", ~"au", ~"aw", ~"ax", ~"az", ~"ba", ~"bb", ~"bd", ~"be", ~"bf", - ~"bg", ~"bh", ~"bi", ~"bj", ~"bl", ~"bm", ~"bn", ~"bo", ~"bq", ~"br", ~"bs", - ~"bt", ~"bv", ~"bw", ~"by", ~"bz", ~"ca", ~"cc", ~"cd", ~"cf", ~"cg", ~"ch", - ~"ci", ~"ck", ~"cl", ~"cm", ~"cn", ~"co", ~"cr", ~"cu", ~"cv", ~"cw", ~"cx", - ~"cy", ~"cz", ~"de", ~"dj", ~"dk", ~"dm", ~"do", ~"dz", ~"ec", ~"ee", ~"eg", - ~"eh", ~"er", ~"es-ct", ~"es", ~"et", ~"eu", ~"fi", ~"fj", ~"fk", ~"fm", ~"fo", - ~"fr", ~"ga", ~"gb-eng", ~"gb-nir", ~"gb-sct", ~"gb-wls", ~"gb", ~"gd", ~"ge", - ~"gf", ~"gg", ~"gh", ~"gi", ~"gl", ~"gm", ~"gn", ~"gp", ~"gq", ~"gr", ~"gs", - ~"gt", ~"gu", ~"gw", ~"gy", ~"hk", ~"hm", ~"hn", ~"hr", ~"ht", ~"hu", ~"id", - ~"ie", ~"il", ~"im", ~"in", ~"io", ~"iq", ~"ir", ~"is", ~"it", ~"je", ~"jm", - ~"jo", ~"jp", ~"ke", ~"kg", ~"kh", ~"ki", ~"km", ~"kn", ~"kp", ~"kr", ~"kw", - ~"ky", ~"kz", ~"la", ~"lb", ~"lc", ~"li", ~"lk", ~"lr", ~"ls", ~"lt", ~"lu", - ~"lv", ~"ly", ~"ma", ~"mc", ~"md", ~"me", ~"mf", ~"mg", ~"mh", ~"mk", ~"ml", - ~"mm", ~"mn", ~"mo", ~"mp", ~"mq", ~"mr", ~"ms", ~"mt", ~"mu", ~"mv", ~"mw", - ~"mx", ~"my", ~"mz", ~"na", ~"nc", ~"ne", ~"nf", ~"ng", ~"ni", ~"nl", ~"no", - ~"np", ~"nr", ~"nu", ~"nz", ~"om", ~"pa", ~"pe", ~"pf", ~"pg", ~"ph", ~"pk", - ~"pl", ~"pm", ~"pn", ~"pr", ~"ps", ~"pt", ~"pw", ~"py", ~"qa", ~"re", ~"ro", - ~"rs", ~"ru", ~"rw", ~"sa", ~"sb", ~"sc", ~"sd", ~"se", ~"sg", ~"sh", ~"si", - ~"sj", ~"sk", ~"sl", ~"sm", ~"sn", ~"so", ~"sr", ~"ss", ~"st", ~"sv", ~"sx", - ~"sy", ~"sz", ~"tc", ~"td", ~"tf", ~"tg", ~"th", ~"tj", ~"tk", ~"tl", ~"tm", - ~"tn", ~"to", ~"tr", ~"tt", ~"tv", ~"tw", ~"tz", ~"ua", ~"ug", ~"um", ~"un", - ~"us", ~"uy", ~"uz", ~"va", ~"vc", ~"ve", ~"vg", ~"vi", ~"vn", ~"vu", ~"wf", - ~"ws", ~"xk", ~"ye", ~"yt", ~"za", ~"zm", ~"zw"; +@flag-list: + ~"ad", + ~"ae", + ~"af", + ~"ag", + ~"ai", + ~"al", + ~"am", + ~"ao", + ~"aq", + ~"ar", + ~"as", + ~"at", + ~"au", + ~"aw", + ~"ax", + ~"az", + ~"ba", + ~"bb", + ~"bd", + ~"be", + ~"bf", + ~"bg", + ~"bh", + ~"bi", + ~"bj", + ~"bl", + ~"bm", + ~"bn", + ~"bo", + ~"bq", + ~"br", + ~"bs", + ~"bt", + ~"bv", + ~"bw", + ~"by", + ~"bz", + ~"ca", + ~"cc", + ~"cd", + ~"cf", + ~"cg", + ~"ch", + ~"ci", + ~"ck", + ~"cl", + ~"cm", + ~"cn", + ~"co", + ~"cr", + ~"cu", + ~"cv", + ~"cw", + ~"cx", + ~"cy", + ~"cz", + ~"de", + ~"dj", + ~"dk", + ~"dm", + ~"do", + ~"dz", + ~"ec", + ~"ee", + ~"eg", + ~"eh", + ~"er", + ~"es-ct", + ~"es", + ~"et", + ~"eu", + ~"fi", + ~"fj", + ~"fk", + ~"fm", + ~"fo", + ~"fr", + ~"ga", + ~"gb-eng", + ~"gb-nir", + ~"gb-sct", + ~"gb-wls", + ~"gb", + ~"gd", + ~"ge", + ~"gf", + ~"gg", + ~"gh", + ~"gi", + ~"gl", + ~"gm", + ~"gn", + ~"gp", + ~"gq", + ~"gr", + ~"gs", + ~"gt", + ~"gu", + ~"gw", + ~"gy", + ~"hk", + ~"hm", + ~"hn", + ~"hr", + ~"ht", + ~"hu", + ~"id", + ~"ie", + ~"il", + ~"im", + ~"in", + ~"io", + ~"iq", + ~"ir", + ~"is", + ~"it", + ~"je", + ~"jm", + ~"jo", + ~"jp", + ~"ke", + ~"kg", + ~"kh", + ~"ki", + ~"km", + ~"kn", + ~"kp", + ~"kr", + ~"kw", + ~"ky", + ~"kz", + ~"la", + ~"lb", + ~"lc", + ~"li", + ~"lk", + ~"lr", + ~"ls", + ~"lt", + ~"lu", + ~"lv", + ~"ly", + ~"ma", + ~"mc", + ~"md", + ~"me", + ~"mf", + ~"mg", + ~"mh", + ~"mk", + ~"ml", + ~"mm", + ~"mn", + ~"mo", + ~"mp", + ~"mq", + ~"mr", + ~"ms", + ~"mt", + ~"mu", + ~"mv", + ~"mw", + ~"mx", + ~"my", + ~"mz", + ~"na", + ~"nc", + ~"ne", + ~"nf", + ~"ng", + ~"ni", + ~"nl", + ~"no", + ~"np", + ~"nr", + ~"nu", + ~"nz", + ~"om", + ~"pa", + ~"pe", + ~"pf", + ~"pg", + ~"ph", + ~"pk", + ~"pl", + ~"pm", + ~"pn", + ~"pr", + ~"ps", + ~"pt", + ~"pw", + ~"py", + ~"qa", + ~"re", + ~"ro", + ~"rs", + ~"ru", + ~"rw", + ~"sa", + ~"sb", + ~"sc", + ~"sd", + ~"se", + ~"sg", + ~"sh", + ~"si", + ~"sj", + ~"sk", + ~"sl", + ~"sm", + ~"sn", + ~"so", + ~"sr", + ~"ss", + ~"st", + ~"sv", + ~"sx", + ~"sy", + ~"sz", + ~"tc", + ~"td", + ~"tf", + ~"tg", + ~"th", + ~"tj", + ~"tk", + ~"tl", + ~"tm", + ~"tn", + ~"to", + ~"tr", + ~"tt", + ~"tv", + ~"tw", + ~"tz", + ~"ua", + ~"ug", + ~"um", + ~"un", + ~"us", + ~"uy", + ~"uz", + ~"va", + ~"vc", + ~"ve", + ~"vg", + ~"vi", + ~"vn", + ~"vu", + ~"wf", + ~"ws", + ~"xk", + ~"ye", + ~"yt", + ~"za", + ~"zm", + ~"zw"; each(@flag-list, .(@country-code) { i.flag-icon-@{country-code} { @@ -298,3 +599,5 @@ each(@flag-list, .(@country-code) { } } }); + +// flag icons sizing end diff --git a/src/less/core/typography.less b/src/less/core/typography.less index cd2939a180..35c52bcc33 100644 --- a/src/less/core/typography.less +++ b/src/less/core/typography.less @@ -31,7 +31,8 @@ h6, margin-top: 0; } - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { display: inline-flex; vertical-align: text-top; } @@ -43,7 +44,8 @@ h6, font-family: var(--brand-headline); font-weight: var(--font-weight-header, 400); - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { font-size: 3.5rem; line-height: 4.25rem; } @@ -56,7 +58,8 @@ h1, line-height: 2.875rem; font-weight: var(--font-weight-header, 400); - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { font-size: 2rem; line-height: 2.875rem; } @@ -69,7 +72,8 @@ h2, line-height: 2.125rem; font-weight: var(--font-weight-header, 400); - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { font-size: 1.5rem; line-height: 2.125rem; } @@ -82,7 +86,8 @@ h3, line-height: 1.75rem; font-weight: var(--font-weight-header, 400); - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { font-size: 1.25rem; line-height: 1.75rem; } @@ -95,7 +100,8 @@ h4, font-size: 1.125rem; line-height: 1.625rem; - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { font-size: 1.125rem; line-height: 1.625rem; } @@ -108,7 +114,8 @@ h5, line-height: 1.5rem; font-weight: var(--font-weight-header, 400); - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { font-size: 1rem; line-height: 1.5rem; } @@ -120,7 +127,8 @@ h6, line-height: 1.375rem; font-weight: var(--font-weight-bold, 700); - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { font-size: 0.875rem; line-height: 1.375rem; } @@ -225,7 +233,8 @@ blockquote, font-size: 2.5rem; line-height: 3.5rem; - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { font-size: 2.5rem; line-height: 3.5rem; } @@ -236,7 +245,8 @@ blockquote, font-size: 2rem; line-height: 2.75rem; - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { font-size: 2rem; line-height: 2.75rem; } @@ -247,7 +257,8 @@ blockquote, font-size: 1.5rem; line-height: 2.125rem; - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { font-size: 1.5rem; line-height: 2.125rem; } @@ -258,7 +269,8 @@ blockquote, font-size: 1.25rem; line-height: 1.875rem; - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { font-size: 1.25rem; line-height: 1.875rem; } @@ -274,7 +286,8 @@ blockquote, font-size: 0.875rem; line-height: 1.25rem; - .material-icons { + .material-icons, + :is(i[class^="at-"], i[class*=" at-"]) { font-size: 0.875rem; line-height: 1.25rem; } diff --git a/src/less/documentation-payex.less b/src/less/documentation-payex.less index c64cb04a0b..f9a4d042eb 100644 --- a/src/less/documentation-payex.less +++ b/src/less/documentation-payex.less @@ -2,47 +2,28 @@ @import "variables-payex.less"; @import "documentation-swedbankpay.less"; -.documentation { - .doc-container { - &.dg-front-page { - img { - &.background-img { - &.cluster-bubble, - &.single-bubble, - &.two-bubbles, - &.large-bubble { - visibility: hidden; - } - } - } - - .dg-front-page-container { - .dg-version-indicator { - span { - background-color: @brand-bg-1; - } - } +.documentation .doc-container.dg-front-page { + img + .background-img:is( + .cluster-bubble, + .single-bubble, + .two-bubbles, + .large-bubble + ) { + visibility: hidden; + } - header { - .dg-title-big { - &.my-0 { - font-family: var(--brand-headline); - } - } - } + .dg-front-page-container { + .dg-version-indicator span { + background-color: var(--brand-bg-1); + } - p { - &.front-page-lead { - font-family: var(--brand-default); - } - } - } + header .dg-title-big.my-0 { + font-family: var(--brand-headline); + } - i { - &.material-icons-outlined { - font-family: var(--payex-material-icons); - } - } + p.front-page-lead { + font-family: var(--brand-default); } } } diff --git a/src/less/documentation-swedbankpay.less b/src/less/documentation-swedbankpay.less index 87c1ff7f8d..d4151efd04 100644 --- a/src/less/documentation-swedbankpay.less +++ b/src/less/documentation-swedbankpay.less @@ -44,7 +44,7 @@ & > div:not(.sp-stack) { font-size: initial; line-height: 1.5; - color: @brand-secondary; + color: var(--brand-secondary); } } @@ -239,7 +239,7 @@ z-index: 103; &:focus-visible { - outline: 2px solid @brand-secondary; + outline: 2px solid var(--brand-secondary); border-radius: 2px; } @@ -251,7 +251,7 @@ } &:focus-visible { - outline: 2px solid @brand-secondary; + outline: 2px solid var(--brand-secondary); border-radius: 2px; } @@ -275,7 +275,7 @@ background: rgb(@brand-primary-lighter 0.8); padding: 2px 6px; margin: 2px; - color: @brand-secondary-light-1; + color: var(--brand-secondary-light-1); } } @@ -297,7 +297,7 @@ &:focus, &:hover { i { - color: @brand-secondary; + color: var(--brand-secondary); transform: scale(1.2); } } @@ -311,7 +311,7 @@ height: auto; position: absolute; z-index: 103; - background-color: @white; + background-color: var(--white); border-radius: var(--border-radius, 8px); max-height: 50vh; overflow: auto; @@ -319,7 +319,7 @@ padding-top: 0.5rem; &:focus-visible { - outline: 2px solid @brand-secondary; + outline: 2px solid var(--brand-secondary); border-radius: 2px; } @@ -332,7 +332,7 @@ text-decoration: none; &:focus-visible { - outline: 2px solid @brand-secondary; + outline: 2px solid var(--brand-secondary); outline-offset: -2px; border-radius: 2px; } @@ -356,7 +356,7 @@ } span { - color: @brand-secondary; + color: var(--brand-secondary); display: inline-block; position: relative; z-index: 1; @@ -394,7 +394,7 @@ i { font-size: 1.25rem; - color: @brand-secondary; + color: var(--brand-secondary); } } @@ -417,7 +417,7 @@ &:hover, &:focus { background-color: transparent; - outline-color: @brand-secondary; + outline-color: var(--brand-secondary); i { color: #000000; @@ -920,7 +920,8 @@ background-color: @brand-primary; border-radius: 50%; - .material-icons { + .material-icons, + i:is([class^="at-"], [class*=" at-"]) { font-size: 6rem; } } @@ -1123,7 +1124,7 @@ } &.showcase-panel-negative { - background-color: @brand-secondary; + background-color: var(--brand-secondary); } &.showcase-panel-advanced { @@ -1282,7 +1283,7 @@ width: 100%; &.dark { - background-color: @brand-secondary; + background-color: var(--brand-secondary); } } } @@ -1729,7 +1730,7 @@ border: 1px solid transparent; &:hover { - border: 1px solid @brand-secondary; + border: 1px solid var(--brand-secondary); } } @@ -1766,7 +1767,7 @@ &.help-icon { width: 1.25rem; height: 1.25rem; - color: @brand-secondary; + color: var(--brand-secondary); } } @@ -1893,7 +1894,7 @@ #link-doc { .link-dark-background { - background-color: @brand-secondary; + background-color: var(--brand-secondary); border-radius: var(--border-radius, 8px); a:focus-visible { @@ -2040,7 +2041,7 @@ .accordion { :focus-visible { - outline: 2px solid @brand-secondary; + outline: 2px solid var(--brand-secondary); border-radius: 2px; } @@ -2064,7 +2065,7 @@ .example-box { width: 6rem; height: 0.625rem; - background-color: @brand-secondary; + background-color: var(--brand-secondary); border-radius: 0.125rem; } } @@ -2160,7 +2161,7 @@ padding: 0 0.75rem; &:focus { - outline: 2px solid @brand-secondary; + outline: 2px solid var(--brand-secondary); border-radius: 2px; } } @@ -2194,7 +2195,8 @@ height: 120px; width: $height; - .material-icons { + .material-icons, + i[class^="at-"] { font-size: 4rem; } } diff --git a/src/less/global.less b/src/less/global.less index 86b98e7bc9..462a159d12 100644 --- a/src/less/global.less +++ b/src/less/global.less @@ -1,7 +1,10 @@ /* stylelint-disable-next-line import-notation */ +// TODO: Google Material icons font should be removed during next release after > 10.x @import (css) url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"); +@import url("https://unpkg.com/@vectopus/atlas-icons/style.css"); + /* Other colors */ @text-muted: fade(@text-color, 75%); @text-color: @brand-secondary; @@ -347,23 +350,6 @@ ol { } /* stylelint-enable */ -.material-icons-styling(@color: @brand-secondary, @margin: 0 0.5rem, @font-size: 1.25rem) { - color: @color; - margin: @margin; - font-family: "Material Icons"; - font-weight: normal; - font-style: normal; - font-size: @font-size; - line-height: 1; - letter-spacing: normal; - text-transform: none; - display: inline-block; - white-space: nowrap; - word-wrap: normal; - direction: ltr; - font-feature-settings: "liga"; -} - .tab-focus(@color: @brand-secondary) { /* Default */ outline: 2px solid @color; diff --git a/src/less/variables-payex.less b/src/less/variables-payex.less index 293e75b28a..a23f5e5c82 100644 --- a/src/less/variables-payex.less +++ b/src/less/variables-payex.less @@ -123,14 +123,6 @@ body { } } -.material-icons { - font-family: var(--payex-material-icons); - - &.alert-icon { - font-family: "Material icons"; - } -} - /* ==================================CSS VARIABLES======================================== * * NEW CSS VARIABLES - work in progress @@ -177,21 +169,34 @@ body { --brand-bg-3: #fbedf4; --brand-bg-4: #eaf8fc; --brand-bg-gray: var(--brand-secondary-light-2, #c8c8c8); + --bg-grey: var(--brand-secondary-light-2, #c8c8c8); --brand-bg-white: #ffffff; --bg-quaternary: var(--list-gray, #999999); /* State colors */ - --brand-success: #238635; - --brand-success-light: #e8f3e6; - --brand-success-light-2: var(--brand-success, #238635); - --brand-warning: #f35b1c; - --brand-warning-light: #ffecd5; - --brand-warning-2: #f35b1c; - --brand-error-border: #f1bbb9; - --brand-error: #c5131c; - --brand-error-light: #ffebe3; - --brand-info: #3e6ab6; - --brand-info-light: #e8eff9; + + --system-success: #238635; + --brand-success: var(--system-success); + --system-success-light: #e8f3e6; + --brand-success-light: var(--system-success-light); + --system-success-light-2: var(--system-success, #238635); + --brand-success-light-2: var(--system-success-light-2); + --system-warning: #f35b1c; + --brand-warning: var(--system-warning); + --system-warning-light: #ffecd5; + --brand-warning-light: var(--system-warning-light); + --system-warning-2: #f35b1c; + --brand-warning-2: var(--system-warning-2); + --system-error-border: #f1bbb9; + --brand-error-border: var(--system-error-border); + --system-error: #c5131c; + --brand-error: var(--system-error); + --system-error-light: #ffebe3; + --brand-error-light: var(--system-error-light); + --system-info: #3e6ab6; + --brand-info: var(--system-info); + --system-info-light: #e8eff9; + --brand-info-light: var(--system-info-light); // text colors --text-color: var(--brand-secondary); @@ -275,10 +280,16 @@ body { --brand-black: "Futura PT W08 Medium", sans-serif; --brand-default: "Futura PT W08 Book", sans-serif; --brand-monofont: monospace; - --payex-material-icons: "Material Icons Outlined"; --brand-headline: "Futura PT W08 Demi", sans-serif; --brand-font-default: "Futura PT W08 Book", sans-serif; + // icon fonts + --icons-font-material: "Material Icons"; + --icons-font-material-outlined: "Material Icons Outlined"; + --icons-font-material-default: var(--icons-font-material-outlined); + --icons-font-atlas: initial; + --icons-font-default: var(--icons-font-atlas); + /* Font weights */ --font-weight-header: 400; } diff --git a/src/less/variables-swedbankpay.less b/src/less/variables-swedbankpay.less index 6af92b3743..daab4e3beb 100644 --- a/src/less/variables-swedbankpay.less +++ b/src/less/variables-swedbankpay.less @@ -173,6 +173,7 @@ --brand-secondary-light-3: var(--brown-light, #d4c4bc); // Grayscale + --black: #222222; --light-gray: #f9f8f6; // Brown scale colors @@ -267,6 +268,13 @@ --brand-monofont: "Akkurat Mono", monospace; --brand-default: "Arial", sans-serif; + // icon fonts + --icons-font-material: "Material Icons"; + --icons-font-material-outlined: "Material Icons Outlined"; + --icons-font-material-default: var(--icons-font-material); + --icons-font-atlas: initial; + --icons-font-default: var(--icons-font-atlas); + /* Font weights */ --font-weight-header: 400; } From c38a516bf462e5a1797e165c6655c8ab4a47f22a Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Mon, 18 Dec 2023 11:42:30 +0100 Subject: [PATCH 02/29] SWED-2276 fix linter import font-icons --- src/less/global.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/less/global.less b/src/less/global.less index 462a159d12..f99d2365da 100644 --- a/src/less/global.less +++ b/src/less/global.less @@ -1,8 +1,9 @@ -/* stylelint-disable-next-line import-notation */ // TODO: Google Material icons font should be removed during next release after > 10.x +/* stylelint-disable-next-line import-notation */ @import (css) url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"); +/* stylelint-disable-next-line import-notation */ @import url("https://unpkg.com/@vectopus/atlas-icons/style.css"); /* Other colors */ From 20aab213effc849581fb769253f12bd7d9bce1f4 Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Mon, 18 Dec 2023 12:01:12 +0100 Subject: [PATCH 03/29] SWED-2276 update jest tests --- .../__snapshots__/index.test.js.snap | 42 +++++------- .../Alerts/__snapshots__/index.test.js.snap | 6 +- .../Charts/__snapshots__/index.test.js.snap | 66 +++++++------------ .../Dialog/__snapshots__/index.test.js.snap | 6 +- .../Lists/__snapshots__/index.test.js.snap | 9 ++- .../Forms/__snapshots__/index.test.js.snap | 6 +- .../__snapshots__/index.test.js.snap | 7 +- .../Alert/__snapshots__/index.test.js.snap | 20 +++--- src/App/components/Alert/index.test.js | 6 +- .../__snapshots__/index.test.js.snap | 2 +- .../__snapshots__/index.test.js.snap | 2 +- .../__snapshots__/index.test.js.snap | 12 ++-- 12 files changed, 70 insertions(+), 114 deletions(-) diff --git a/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap index 3b2f225d7f..11b8ba9208 100644 --- a/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap +++ b/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap @@ -682,10 +682,8 @@ exports[`Components: ActionList renders 1`] = ` + className="at-error alert-icon" + />

Deprecated: @@ -734,10 +732,9 @@ exports[`Components: ActionList renders 1`] = ` - more_vert - + aria-hidden={true} + className="at-dots-vertical small" + /> @@ -888,7 +885,7 @@ exports[`Components: ActionList renders 1`] = ` <button id="actionListToggle" aria-label="Action list button" type="button" class="action-toggle" aria-haspopup="true"> - <i class="material-icons">more_vert</i> + <i class="at-dots-vertical small" aria-hidden="true"></i> </button> @@ -960,10 +957,9 @@ exports[`Components: ActionList renders 1`] = ` - more_vert - + aria-hidden={true} + className="at-dots-vertical small" + /> @@ -1114,7 +1110,7 @@ exports[`Components: ActionList renders 1`] = ` <button id="actionListToggle" aria-label="Action list button" type="button" class="action-toggle" aria-haspopup="true"> - <i class="material-icons">more_vert</i> + <i class="at-dots-vertical small" aria-hidden="true"></i> </button> @@ -1178,10 +1174,9 @@ exports[`Components: ActionList renders 1`] = ` - more_vert - + aria-hidden={true} + className="at-dots-vertical small" + /> @@ -1332,7 +1327,7 @@ exports[`Components: ActionList renders 1`] = ` <button id="actionListToggle" aria-label="Action list button" type="button" class="action-toggle" aria-haspopup="true"> - <i class="material-icons">more_vert</i> + <i class="at-dots-vertical small" aria-hidden="true"></i> </button> @@ -1396,10 +1391,9 @@ exports[`Components: ActionList renders 1`] = ` - more_vert - + aria-hidden={true} + className="at-dots-vertical small" + /> @@ -1550,7 +1544,7 @@ exports[`Components: ActionList renders 1`] = ` <button id="actionListToggle" aria-label="Action list button" type="button" class="action-toggle" aria-haspopup="true"> - <i class="material-icons">more_vert</i> + <i class="at-dots-vertical small" aria-hidden="true"></i> </button> diff --git a/src/App/ComponentsDocumentation/components/Alerts/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Alerts/__snapshots__/index.test.js.snap index 71e862b3a2..56edb26a1a 100644 --- a/src/App/ComponentsDocumentation/components/Alerts/__snapshots__/index.test.js.snap +++ b/src/App/ComponentsDocumentation/components/Alerts/__snapshots__/index.test.js.snap @@ -20,10 +20,8 @@ exports[`Documentation: Alerts Content guidelines renders 1`] = ` + className="at-info-circle alert-icon" + />

Error title: diff --git a/src/App/ComponentsDocumentation/components/Charts/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Charts/__snapshots__/index.test.js.snap index 54a93cd3d6..0bdf55fc7d 100644 --- a/src/App/ComponentsDocumentation/components/Charts/__snapshots__/index.test.js.snap +++ b/src/App/ComponentsDocumentation/components/Charts/__snapshots__/index.test.js.snap @@ -2507,10 +2507,8 @@ exports[`Dashboard: Charts renders 1`] = ` + className="at-error alert-icon" + />

Deprecated: @@ -3318,10 +3316,8 @@ exports[`Dashboard: Charts renders 1`] = ` + className="at-info alert-icon" + />

Accessibility considerations: @@ -3644,10 +3640,8 @@ exports[`Dashboard: Charts renders 1`] = ` + className="at-info alert-icon" + />

Accessibility considerations: @@ -3874,10 +3868,8 @@ exports[`Dashboard: Charts renders 1`] = ` + className="at-info alert-icon" + />

Accessibility considerations: @@ -4175,10 +4167,8 @@ exports[`Dashboard: Charts renders 1`] = ` + className="at-info alert-icon" + />

Accessibility considerations: @@ -4504,10 +4494,8 @@ exports[`Dashboard: Charts renders 1`] = ` + className="at-info alert-icon" + />

Accessibility considerations: @@ -4859,10 +4847,8 @@ exports[`Dashboard: Charts renders 1`] = ` + className="at-info alert-icon" + />

Accessibility considerations: @@ -5100,10 +5086,8 @@ exports[`Dashboard: Charts renders 1`] = ` + className="at-info alert-icon" + />

Accessibility considerations: @@ -5329,10 +5313,8 @@ exports[`Dashboard: Charts renders 1`] = ` + className="at-info alert-icon" + />

Accessibility considerations: @@ -5654,10 +5636,8 @@ exports[`Dashboard: Charts renders 1`] = ` + className="at-info alert-icon" + />

Accessibility considerations: @@ -5913,10 +5893,8 @@ exports[`Dashboard: Charts renders 1`] = ` + className="at-info alert-icon" + />

Accessibility considerations: diff --git a/src/App/ComponentsDocumentation/components/Dialog/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Dialog/__snapshots__/index.test.js.snap index 8722c304b4..71bdbfe706 100644 --- a/src/App/ComponentsDocumentation/components/Dialog/__snapshots__/index.test.js.snap +++ b/src/App/ComponentsDocumentation/components/Dialog/__snapshots__/index.test.js.snap @@ -299,10 +299,8 @@ Array [ + className="at-warning alert-icon" + />

Initializing dialog buttons: diff --git a/src/App/ComponentsDocumentation/components/Lists/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Lists/__snapshots__/index.test.js.snap index febdaceeaf..00113b4d3e 100644 --- a/src/App/ComponentsDocumentation/components/Lists/__snapshots__/index.test.js.snap +++ b/src/App/ComponentsDocumentation/components/Lists/__snapshots__/index.test.js.snap @@ -3945,10 +3945,9 @@ exports[`Documentation: Lists renders 1`] = ` - more_vert - + aria-hidden={true} + className="at-dots-vertical small" + /> @@ -4241,7 +4240,7 @@ exports[`Documentation: Lists renders 1`] = ` <button id="actionListToggle" aria-label="Action list button" type="button" class="action-toggle" aria-haspopup="true"> - <i class="material-icons">more_vert</i> + <i class="at-dots-vertical small" aria-hidden="true"></i> </button> diff --git a/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap b/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap index e9c93c61d7..cfd0b1eaa4 100644 --- a/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap +++ b/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap @@ -1543,10 +1543,8 @@ exports[`Forms: index renders 1`] = ` + className="at-cancel alert-icon" + />

Error. diff --git a/src/App/components/ActionList/__snapshots__/index.test.js.snap b/src/App/components/ActionList/__snapshots__/index.test.js.snap index e6459acea4..5298c21f38 100644 --- a/src/App/components/ActionList/__snapshots__/index.test.js.snap +++ b/src/App/components/ActionList/__snapshots__/index.test.js.snap @@ -16,10 +16,9 @@ exports[`Component: ActionList .action-menu prevents default when an item is cli - more_vert - + aria-hidden={true} + className="at-dots-vertical small" + /> diff --git a/src/App/components/Alert/__snapshots__/index.test.js.snap b/src/App/components/Alert/__snapshots__/index.test.js.snap index 841eb4d14c..78918ea55e 100644 --- a/src/App/components/Alert/__snapshots__/index.test.js.snap +++ b/src/App/components/Alert/__snapshots__/index.test.js.snap @@ -8,7 +8,7 @@ exports[`Component: Alert prop type is marked as required 1`] = `