From ef596c7d274e569a4fbb7b9ad74f2c993240c329 Mon Sep 17 00:00:00 2001 From: "Ignacio Ceballos (Yayo)" Date: Mon, 31 Mar 2025 18:02:42 +0200 Subject: [PATCH 1/2] test colors --- src/skins/blau.tsx | 57 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 43 insertions(+), 14 deletions(-) diff --git a/src/skins/blau.tsx b/src/skins/blau.tsx index 99abb575d9..63846699d5 100644 --- a/src/skins/blau.tsx +++ b/src/skins/blau.tsx @@ -13,6 +13,7 @@ export const palette = { blauBlueSecondary20: '#B2D4EC', blauBlueSecondary30: '#80B7DF', blauBlueSecondary60: '#005A99', + blauBlueDark: '#023E76', blauPurple: '#7814B3', blauPurple10: '#F1E7F7', blauPurple30: '#BB89D9', @@ -81,7 +82,7 @@ export const getBlauSkin: GetKnownSkin = () => { buttonLinkDangerBackgroundInverse: palette.white, buttonLinkDangerBackgroundInversePressed: palette.blauRed10, buttonLinkBackgroundPressed: palette.blauPurple10, - buttonLinkBackgroundInversePressed: applyAlpha(palette.white, 0.15), + buttonLinkBackgroundInversePressed: applyAlpha(palette.blauBlueDark, 0.15), buttonPrimaryBackground: palette.blauBlueSecondary, buttonPrimaryBackgroundInverse: palette.white, buttonPrimaryBackgroundPressed: palette.blauBlueSecondary60, @@ -89,21 +90,21 @@ export const getBlauSkin: GetKnownSkin = () => { buttonPrimaryBackgroundInversePressed: palette.blauBluePrimary30, buttonSecondaryBorder: palette.blauBlueSecondary, buttonSecondaryBorderPressed: palette.blauBlueSecondary60, - buttonSecondaryBorderInverse: palette.white, + buttonSecondaryBorderInverse: palette.blauBlueDark, buttonSecondaryBackgroundHover: palette.blauBlueSecondary10, buttonSecondaryBackgroundPressed: palette.blauBlueSecondary10, buttonSecondaryBorderInversePressed: palette.white, buttonSecondaryBackgroundInverseHover: applyAlpha(palette.white, 0.2), buttonSecondaryBackgroundInversePressed: applyAlpha(palette.white, 0.2), textButtonPrimary: palette.white, - textButtonPrimaryInverse: palette.blauBlueSecondary, + textButtonPrimaryInverse: palette.blauBlueDark, textButtonPrimaryInversePressed: palette.blauBlueSecondary60, textButtonSecondary: palette.blauBlueSecondary, textButtonSecondaryPressed: palette.blauBlueSecondary60, - textButtonSecondaryInverse: palette.white, + textButtonSecondaryInverse: palette.blauBlueDark, textButtonSecondaryInversePressed: palette.white, textLink: palette.blauPurple, - textLinkInverse: palette.white, + textLinkInverse: palette.blauBlueDark, textLinkDanger: palette.blauRed, textLinkSnackbar: palette.blauPurple30, textActivated: palette.blauBlueSecondary, @@ -136,7 +137,7 @@ export const getBlauSkin: GetKnownSkin = () => { neutralLow: palette.grey1, neutralLowAlternative: palette.grey2, textPrimary: palette.grey6, - textPrimaryInverse: palette.white, + textPrimaryInverse: palette.blauBlueDark, textSecondary: palette.grey5, textSecondaryInverse: palette.blauBluePrimary20, error: palette.blauRed, @@ -374,15 +375,43 @@ export const getBlauSkin: GetKnownSkin = () => { text2: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}}, text3: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}}, text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}}, - text5: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'light'}, - text6: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'light'}, - text7: {lineHeight: {desktop: 48, mobile: 32}, size: {desktop: 40, mobile: 28}, weight: 'light'}, - text8: {lineHeight: {desktop: 56, mobile: 40}, size: {desktop: 48, mobile: 32}, weight: 'light'}, - text9: {lineHeight: {desktop: 64, mobile: 48}, size: {desktop: 56, mobile: 40}, weight: 'light'}, - text10: {lineHeight: {desktop: 72, mobile: 56}, size: {desktop: 64, mobile: 48}, weight: 'light'}, + text5: { + lineHeight: {desktop: 32, mobile: 24}, + size: {desktop: 28, mobile: 20}, + weight: 'regular', + }, + text6: { + lineHeight: {desktop: 40, mobile: 32}, + size: {desktop: 32, mobile: 24}, + weight: 'regular', + }, + text7: { + lineHeight: {desktop: 48, mobile: 32}, + size: {desktop: 40, mobile: 28}, + weight: 'regular', + }, + text8: { + lineHeight: {desktop: 56, mobile: 40}, + size: {desktop: 48, mobile: 32}, + weight: 'regular', + }, + text9: { + lineHeight: {desktop: 64, mobile: 48}, + size: {desktop: 56, mobile: 40}, + weight: 'regular', + }, + text10: { + lineHeight: {desktop: 72, mobile: 56}, + size: {desktop: 64, mobile: 48}, + weight: 'regular', + }, title1: {weight: 'medium'}, - title2: {weight: 'light'}, - title3: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'light'}, + title2: {weight: 'regular'}, + title3: { + lineHeight: {desktop: 32, mobile: 24}, + size: {desktop: 28, mobile: 20}, + weight: 'regular', + }, }, }; return skin; From f4e56c527bf060fbc9dc09656e88c55e1191e1ca Mon Sep 17 00:00:00 2001 From: Yayo Date: Tue, 1 Apr 2025 15:12:09 +0200 Subject: [PATCH 2/2] blau test colors --- src/skins/blau.tsx | 12 ++++++------ src/stepper.tsx | 6 +----- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/src/skins/blau.tsx b/src/skins/blau.tsx index 63846699d5..e2db42d29d 100644 --- a/src/skins/blau.tsx +++ b/src/skins/blau.tsx @@ -106,8 +106,8 @@ export const getBlauSkin: GetKnownSkin = () => { textLink: palette.blauPurple, textLinkInverse: palette.blauBlueDark, textLinkDanger: palette.blauRed, - textLinkSnackbar: palette.blauPurple30, - textActivated: palette.blauBlueSecondary, + textLinkSnackbar: palette.blauBlueDark, + textActivated: palette.blauBlueDark, textBrand: palette.blauBluePrimary, control: palette.grey5, controlActivated: palette.blauBlueSecondary, @@ -125,9 +125,9 @@ export const getBlauSkin: GetKnownSkin = () => { divider: palette.grey2, dividerInverse: applyAlpha(palette.white, 0.2), navigationBarDivider: palette.blauBluePrimary, - badge: palette.blauRed, - feedbackErrorBackground: palette.blauRed, - feedbackInfoBackground: palette.grey6, + badge: palette.blauBluePrimary, + feedbackErrorBackground: palette.blauRed30, + feedbackInfoBackground: palette.blauBluePrimary, brand: palette.blauBluePrimary, brandHigh: palette.blauBlueSecondary, inverse: palette.white, @@ -139,7 +139,7 @@ export const getBlauSkin: GetKnownSkin = () => { textPrimary: palette.grey6, textPrimaryInverse: palette.blauBlueDark, textSecondary: palette.grey5, - textSecondaryInverse: palette.blauBluePrimary20, + textSecondaryInverse: palette.blauBlueDark, error: palette.blauRed, textError: palette.blauRed, textErrorInverse: palette.white, diff --git a/src/stepper.tsx b/src/stepper.tsx index 8d89749c39..c8a975fd60 100644 --- a/src/stepper.tsx +++ b/src/stepper.tsx @@ -88,11 +88,7 @@ const Stepper = ({