commit 528f7ffca63477d445732ada44d7206be98e947c
parent 26761f01d8bb8b38b73b452cafd453f31f4b20bc
Author: Sebastian <sebasjm@gmail.com>
Date: Fri, 5 Sep 2025 09:58:44 -0300
test using tailwind color definition
Diffstat:
3 files changed, 243 insertions(+), 6 deletions(-)
diff --git a/packages/kyc-ui/tailwind.config.js b/packages/kyc-ui/tailwind.config.js
@@ -25,7 +25,244 @@ export default {
],
},
theme: {
- extend: {},
+ extend: {
+ colors: {
+ // https://docs.taler.net/design-documents/066-wallet-color-scheme.html
+
+ // PRIMARY
+ /**
+ * Main action color (e.g. filled buttons, tabs, icons)
+ */
+ 'primary': '#0042b3',
+ /**
+ * Text/icons placed on top of primary
+ */
+ 'onPrimary': '#ffffff',
+ /**
+ * Background for FABs, cards, filled fields
+ */
+ 'primaryContainer': '#d3deff',
+ /**
+ * Foreground for primaryContainer
+ */
+ 'onPrimaryContainer': '#00134a',
+ /**
+ * primary in dark mode
+ */
+ 'darkPrimary': '#b4c5ff',
+ /**
+ * Text/icons on darkPrimary
+ */
+ 'darkOnPrimary': '#002a78',
+ /**
+ * Container in dark mode
+ */
+ 'darkPrimaryContainer': '#0042b3',
+ /**
+ * Foreground on container in dark
+ */
+ 'darkOnPrimaryContainer': '#e5ebff',
+
+ // SECONDARY
+ /**
+ * Secondary buttons, chips, and passive UI states
+ */
+ 'secondary': '#586a88',
+ /**
+ * Foreground on secondary
+ */
+ 'onSecondary': '#ffffff',
+ /**
+ * Background for secondary surfaces
+ */
+ 'secondaryContainer': '#d9e3f9',
+ /**
+ * Foreground on secondaryContainer
+ */
+ 'onSecondaryContainer': '#111c2b',
+ /**
+ * Secondary color in dark mode
+ */
+ 'darkSecondary': '#a4c9ff',
+ /**
+ * Text/icons on darkPrimary
+ */
+ 'darkOnSecondary': '#00315d',
+ /**
+ * Container in dark mode
+ */
+ 'darkSecondaryContainer': '#72a3e5',
+ /**
+ * Foreground on container in dark
+ */
+ 'darkOnSecondaryContainer': '#003869',
+ },
+
+ // TERTIARY
+ /**
+ * Used for tags, emphasis markers
+ */
+ 'tertiary': '#338af0',
+ /**
+ * Text/icons on tertiary
+ */
+ 'onTertiary': '#ffffff',
+ /**
+ * Input field backgrounds, selected indicators
+ */
+ 'tertiaryContainer': '#d1e4ff',
+ /**
+ * Text/icons on tertiaryContainer
+ */
+ 'onTertiaryContainer': '#001c39',
+ /**
+ * Accent color in dark mode
+ */
+ 'darkTertiary': '#8dd1e5',
+ /**
+ * Foreground in dark
+ */
+ 'darkOnTertiary': '#003641',
+ /**
+ * Container fill in dark
+ */
+ 'darkTertiaryContainer': '#166577',
+ /**
+ * Text/icons on dark container
+ */
+ 'darkOnTertiaryContainer': '#9ce0f5',
+
+ // ERROR
+ /**
+ * Main error color for messages or outlines
+ */
+ 'error': '#b3261e',
+ /**
+ * Text/icons on error surfaces
+ */
+ 'onError': '#ffffff',
+ /**
+ *
+ */
+ 'errorContainer': '#f9dedc',
+ /**
+ *
+ */
+ 'onErrorContainer': '#410e0b',
+ /**
+ *
+ */
+ 'darkError': '#ffb4aa',
+ /**
+ *
+ */
+ 'darkOnError': '#690003',
+ /**
+ *
+ */
+ 'darkErrorContainer': '#b3261e',
+ /**
+ *
+ */
+ 'darkOnErrorContainer': '#ffcbc4',
+
+ // SUCCESS
+ /**
+ *
+ */
+ 'success': '#337a40',
+ /**
+ *
+ */
+ 'onSuccess': '#ffffff',
+ /**
+ *
+ */
+ 'successContainer': '#2e8534',
+ /**
+ *
+ */
+ 'onSuccessContainer': '#f7fff1',
+ /**
+ *
+ */
+ 'darkSuccess': '#337a40',
+ /**
+ *
+ */
+ 'darkOnSuccess': '#ffffff',
+ /**
+ *
+ */
+ 'darkSuccessContainer': '#1d3522',
+ /**
+ *
+ */
+ 'darkOnSuccessContainer': '#eaf6ec',
+
+ // WARNING
+ /**
+ * Alert banners, passive warnings
+ */
+ 'warning': '#f99c06',
+ /**
+ *
+ */
+ 'onWarning': '#000000',
+ /**
+ *
+ */
+ 'warningContainer': '#fdedd3',
+ /**
+ *
+ */
+ 'onWarningContainer': '#6b4706',
+ /**
+ *
+ */
+ 'darkWarning': '#f99c06',
+ /**
+ *
+ */
+ 'darkOnWarning': '#000000',
+ /**
+ *
+ */
+ 'darkWarningContainer': '#664200',
+ /**
+ *
+ */
+ 'darkOnWarningContainer': '#fdedd3',
+
+ // BACKGROUND
+ /**
+ * App-wide background color
+ */
+ 'background': '#fdfdff',
+ /**
+ *
+ */
+ 'onBackground': '#1a1c1f',
+ /**
+ * Background in dark mode
+ */
+ 'darkBackground': '#11131a',
+ /**
+ *
+ */
+ 'darkOnBackground': '#e2e2eb',
+
+ // OUTLINE
+ /**
+ * Used for input borders, field outlines
+ */
+ 'outline': '#767880',
+ /**
+ * Decorative borders, dividers
+ */
+ 'outlineVariant': '#c4c6d0',
+
+ },
},
plugins: [tw_typo, tw_form],
};
diff --git a/packages/web-util/src/components/Header.tsx b/packages/web-util/src/components/Header.tsx
@@ -32,7 +32,7 @@ export function Header({
//
return (
<Fragment>
- <header class="bg-[#0042b3] w-full mx-auto px-2 border-b border-opacity-25 border-indigo-400">
+ <header class="bg-primary w-full mx-auto px-2 border-b border-opacity-25 border-indigo-400">
<div class="flex flex-row h-16 items-center ">
<div class="flex px-2 justify-start">
<div class="flex-shrink-0 rounded-lg">
@@ -70,7 +70,7 @@ export function Header({
<a
href={notificationURL}
name="notifications"
- class="relative inline-flex items-center justify-center rounded-md bg-[#0042b3] p-1 mr-2 text-indigo-200 hover:bg-indigo-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600"
+ class="relative inline-flex items-center justify-center rounded-md bg-primary p-1 mr-2 text-indigo-200 hover:bg-indigo-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600"
aria-controls="mobile-menu"
aria-expanded="false"
>
@@ -114,7 +114,7 @@ export function Header({
<a
href={profileURL}
name="profile"
- class="relative inline-flex items-center justify-center rounded-md bg-[#0042b3] p-1 mr-2 text-indigo-200 hover:bg-indigo-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600"
+ class="relative inline-flex items-center justify-center rounded-md bg-primary p-1 mr-2 text-indigo-200 hover:bg-indigo-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600"
aria-controls="mobile-menu"
aria-expanded="false"
>
@@ -142,7 +142,7 @@ export function Header({
<button
type="button"
name="toggle sidebar"
- class="relative inline-flex items-center justify-center rounded-md bg-[#0042b3] p-1 text-indigo-200 hover:bg-indigo-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600"
+ class="relative inline-flex items-center justify-center rounded-md bg-primary p-1 text-indigo-200 hover:bg-indigo-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600"
aria-controls="mobile-menu"
aria-expanded="false"
onClick={(e) => {
diff --git a/packages/web-util/src/components/LangSelector.tsx b/packages/web-util/src/components/LangSelector.tsx
@@ -169,7 +169,7 @@ export function LangSelector({
.filter((l) => l !== lang)
.map((lang) => (
<li
- class="text-gray-900 hover:bg-[#0042b3] hover:text-white cursor-pointer relative select-none py-2 pl-3 pr-9"
+ class="text-gray-900 hover:bg-primary hover:text-white cursor-pointer relative select-none py-2 pl-3 pr-9"
role="option"
onClick={() => {
changeLanguage(lang);
