Skip to content

Commit

Permalink
SWED-2279 color page specify if CSS-var
Browse files Browse the repository at this point in the history
  • Loading branch information
@goldenraphti
goldenraphti committed Nov 13, 2023
1 parent cfd9e02 commit 06de6c6
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 1 deletion.
60 changes: 60 additions & 0 deletions src/App/Identity/identity/Color/swedbankpay-colors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,19 @@ export const primaryBrandColors = [
{
title: "Primary",
subTitle: "brand-primary",
isCSSVariable: true,
hex: "#FDC129",
},
{
title: "Primary light",
subTitle: "brand-primary-light",
isCSSVariable: true,
hex: "#FBDD91",
},
{
title: "Primary lighter",
subTitle: "brand-primary-lighter",
isCSSVariable: true,
hex: "#FFF3D5",
},
];
Expand All @@ -20,26 +23,31 @@ export const accentBrandColors = [
{
title: "Brown",
subTitle: "brand-brown",
isCSSVariable: true,
hex: "#2F2424",
},
{
title: "Orange",
subTitle: "brand-orange",
isCSSVariable: true,
hex: "#EE7023",
},
{
title: "Pink",
subTitle: "brand-pink",
isCSSVariable: true,
hex: "#EFB7B6",
},
{
title: "Turquoise",
subTitle: "brand-turquoise",
isCSSVariable: true,
hex: "#31A3AE",
},
{
title: "Turquoise light",
subTitle: "brand-turquoise-light",
isCSSVariable: true,
hex: "#8ACDC3",
},
];
Expand All @@ -48,31 +56,36 @@ export const textColors = [
{
title: "Text default",
subTitle: "text-default",
isCSSVariable: true,
hex: "#2F2424",
textCategory: "default-mode",
},
{
title: "Text muted",
subTitle: "text-muted",
isCSSVariable: true,
hex: "#72605E",
textCategory: "default-mode",
},
{
title: "Text White",
subTitle: "text-white",
isCSSVariable: true,
hex: "#FFFFFF",
hasBorderOverWhiteBG: true,
textCategory: "dark-backgrounds",
},
{
title: "Text Muted White",
subTitle: "text-muted-light",
isCSSVariable: true,
hex: "#A38B80",
textCategory: "dark-backgrounds",
},
{
title: "Text Disabled",
subTitle: "text-disabled",
isCSSVariable: true,
hex: "#D4C4BC",
textCategory: "disabled",
},
Expand All @@ -82,27 +95,32 @@ export const backgroundColors = [
{
title: "BG Orange",
subTitle: "bg-orange",
isCSSVariable: true,
hex: "#FFF1E4",
},
{
title: "BG Brown",
subTitle: "bg-brown",
isCSSVariable: true,
hex: "#EBE7E2",
},
{
title: "BG White",
subTitle: "bg-white",
isCSSVariable: true,
hex: "#FFFFFF",
hasBorderOverWhiteBG: true,
},
{
title: "BG Turquoise",
subTitle: "bg-turquoise",
isCSSVariable: true,
hex: "#EBF8F2",
},
{
title: "BG Gray",
subTitle: "bg-grey",
isCSSVariable: true,
hex: "#F9F8F6",
hasBorderOverWhiteBG: true,
},
Expand All @@ -112,41 +130,49 @@ export const systemColors = [
{
title: "Success",
subTitle: "system-success",
isCSSVariable: true,
hex: "#4D9C0F",
},
{
title: "Success light",
subTitle: "system-success-light",
isCSSVariable: true,
hex: "#E7F8D2",
},
{
title: "Warning",
subTitle: "system-warning",
isCSSVariable: true,
hex: "#EE7023",
},
{
title: "Warning light",
subTitle: "system-warning-light",
isCSSVariable: true,
hex: "#FBEADB",
},
{
title: "Info",
subTitle: "system-info",
isCSSVariable: true,
hex: "#335BB1",
},
{
title: "Info light",
subTitle: "system-info-light",
isCSSVariable: true,
hex: "#E0EAF9",
},
{
title: "Error",
subTitle: "system-error",
isCSSVariable: true,
hex: "#D82E2A",
},
{
title: "Error light",
subTitle: "system-error-light",
isCSSVariable: true,
hex: "#FFE9E9",
},
];
Expand All @@ -156,6 +182,7 @@ export const functionalColors = [
hex: "#2F2424",
baseTokenTitle: "Base 1",
baseTokenSubTitle: "base-1",
isCSSVariable: true,
specificTokenTitle: "Text Default",
specificTokenSubTitle: "text-default",
description: "The default text and icon color on light backgrounds.",
Expand All @@ -164,6 +191,7 @@ export const functionalColors = [
hex: "#72605E",
baseTokenTitle: "Base 2",
baseTokenSubTitle: "base-2",
isCSSVariable: true,
specificTokenTitle: "Text Muted",
specificTokenSubTitle: "text-muted",
description:
Expand All @@ -173,6 +201,7 @@ export const functionalColors = [
hex: "#A38B80",
baseTokenTitle: "Base 3",
baseTokenSubTitle: "base-3",
isCSSVariable: true,
specificTokenTitle: "Text Muted light",
specificTokenSubTitle: "text-muted-light",
description: "The secondary text color for dark backgrounds.",
Expand All @@ -181,6 +210,7 @@ export const functionalColors = [
hex: "#D4C4BC",
baseTokenTitle: "Base 4",
baseTokenSubTitle: "base-4",
isCSSVariable: true,
specificTokenTitle: "Text Disabled",
specificTokenSubTitle: "text-disabled",
description:
Expand All @@ -190,6 +220,7 @@ export const functionalColors = [
hex: "#EBE7E2",
baseTokenTitle: "Base 5",
baseTokenSubTitle: "base-5",
isCSSVariable: true,
specificTokenTitle: "BG Brown",
specificTokenSubTitle: "bg-brown",
description:
Expand All @@ -200,6 +231,7 @@ export const functionalColors = [
hasBorderOverWhiteBG: true,
baseTokenTitle: "Base 6",
baseTokenSubTitle: "base-6",
isCSSVariable: true,
specificTokenTitle: "BG Grey",
specificTokenSubTitle: "bg-grey",
description: "Default background color.",
Expand All @@ -209,6 +241,7 @@ export const functionalColors = [
hasBorderOverWhiteBG: true,
baseTokenTitle: "White",
baseTokenSubTitle: "white",
isCSSVariable: true,
amountSpecificToken: 2,
specificTokenTitle: "Text White",
specificTokenSubTitle: "text-white",
Expand All @@ -223,136 +256,163 @@ export const colorPool = [
{
title: "Primary",
subTitle: "brand-yellow",
isCSSVariable: true,
hex: "#FDC129",
},
{
title: "Yellow light",
subTitle: "yellow-light",
isCSSVariable: false,
hex: "#FCE4A1",
},
{
title: "Yellow lighter",
subTitle: "brand-yellow-lighter",
isCSSVariable: true,
hex: "#FFF3D5",
},
{
title: "Turquoise",
subTitle: "brand-turquoise",
isCSSVariable: true,
hex: "#31A3AE",
},
{
title: "Turquoise light",
subTitle: "brand-turquoise-light",
isCSSVariable: true,
hex: "#8ACDC3",
},
{
title: "Turquoise lighter",
subTitle: "brand-turquoise-lighter",
isCSSVariable: true,
hex: "#EBF8F2",
},
{
title: "Purple",
subTitle: "purple",
isCSSVariable: false,
hex: "#642f93",
},
{
title: "Purple light",
subTitle: "purple-light",
isCSSVariable: false,
hex: "#C58AF9",
},
{
title: "Purple lighter",
subTitle: "purple-lighter",
isCSSVariable: false,
hex: "#F1E0FF",
},
{
title: "Orange",
subTitle: "brand-orange",
isCSSVariable: true,
hex: "#EE7023",
},
{
title: "Orange light",
subTitle: "orange-light",
isCSSVariable: false,
hex: "#FFBA69",
},
{
title: "Orange lighter",
subTitle: "brand-orange-lighter",
isCSSVariable: true,
hex: "#FBEADB",
},
{
title: "Green",
subTitle: "green",
isCSSVariable: false,
hex: "#497125",
},
{
title: "Green light",
subTitle: "green-light",
isCSSVariable: false,
hex: "#70B63A",
},
{
title: "Green lighter",
subTitle: "brand-green-lighter",
isCSSVariable: true,
hex: "#E7F8D2",
},
{
title: "Mahogany",
subTitle: "mahogany",
isCSSVariable: false,
hex: "#4C2D2C",
},
{
title: "Mahogany light",
subTitle: "mahogany-light",
isCSSVariable: false,
hex: "#965E5C",
},
{
title: "Mahogany lighter",
subTitle: "mahogany-lighter",
isCSSVariable: false,
hex: "#EEC4C4",
},
{
title: "Red",
subTitle: "red",
isCSSVariable: false,
hex: "#A62825",
},
{
title: "Red light",
subTitle: "red-light",
isCSSVariable: false,
hex: "#EFB7B6",
},
{
title: "Red lighter",
subTitle: "brand-red-lighter",
isCSSVariable: true,
hex: "#FFE9E9",
},
{
title: "Blue",
subTitle: "brand-blue",
isCSSVariable: true,
hex: "#335BB1",
},
{
title: "Blue light",
subTitle: "blue-light",
isCSSVariable: false,
hex: "#65A0E4",
},
{
title: "Blue lighter",
subTitle: "brand-blue-lighter",
isCSSVariable: true,
hex: "#E0EAF9",
},
{
title: "Fuchsia",
subTitle: "fuchsia",
isCSSVariable: false,
hex: "#B9297F",
},
{
title: "Fuchsia light",
subTitle: "fuchsia-light",
isCSSVariable: false,
hex: "#FBBBE1",
},
{
title: "Fuchsia lighter",
subTitle: "fuchsia-lighter",
isCSSVariable: false,
hex: "#FFEEFC",
},
];
Loading

0 comments on commit 06de6c6

Please sign in to comment.