nsinnovations/erpnext
2
0
Fork 0
mirror of https://github.com/frappe/erpnext.git synced 2026-05-20 13:39:18 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
010d77e8eab33f646354198111be18410d8b15ee
erpnext/banking/src/index.css
Nikhil Kothari 6de5367f12 feat: new banking module (#54720) 
* feat: initial SPA setup for banking

* wip: bring over new banking module

* feat: added Espresso design tokens

* feat: button styles

* fix: add all ink colors

* wip: espresso design system changes

* feat: button and badge espresso components

* fix: button styling for reconcile

* feat: Espresso progress bar

* feat: Espresso toggle switch

* feat: Espresso tabs design

* fix: vertical tab support

* fix: button sizing across modals

* feat: Espresso style table layout

* feat: Espresso tooltip

* feat: Espresso elevations and checkbox

* feat: Dialog with Espresso styles

* feat: Espresso textarea

* fix: input styles

* fix: colors on bank picker

* fix: breadcrumb styling

* fix: bank picker styling

* feat: create doctypes and fields for bank reconciliation

* feat: APIs for banking

* fix: use date format parser

* fix: font styling to match Espresso

* wip: settings modal

* feat: settings dialog component

* fix: icons and invalid requests

* feat: preferences tab

* fix: adjust icon stroke width to 1.5

* feat: rule configuration in settings

* fix: remove sheet component

* feat: alert and error banner component

* feat: dropdown in Espresso

* feat: popover and select in Espresso

* fix: cleanup more styles

* fix: match size of link fields

* feat: command styling

* fix: remove unused style tokens

* fix: styles for global date picker dropdown

* fix: styles for match and reconcile

* feat: table Espresso component

* feat: remove all other design tokens

* fix: remove unused tokens

* fix: form elements

* fix: remove unused styles and fix filters in bank transaction list

* feat: fetch bank rec doctypes for filtering

* fix: record payment modal

* feat: support for dark mode switching

* fix: move bank logos to public folder

* feat: add support for RTL

* feat: support for RTL

* chore: send layout direction in dev boot

* fix: make checkbox work in RTL

* feat: dark mode support

* fix: dark mode style

* feat: bank logos in dark mode

* feat: dark mode bank logos

* chore: use dark mode bank logos everywhere

* chore: move rule evaluation to controller

* chore: add tests for bank transaction rules

* fix: move deps to fix actions errors

* fix: move tw-animate-css to deps

* fix: remove shadcn

* fix: do not open modal if no transactions selected

* fix: add translation strings

* feat: add banner on existing bank reconciliation tool

* feat: bank statement import

* fix: translations and layout directions

* fix: validation for transaction matching rule

* fix: styles

* fix: show conflicting transactions in alert

* fix: show help text for new banking module forms

* feat: show total debits and credits

* fix: dark mode colors in automatic config

* feat: add keyboard shortcuts help

* feat: added keyboard shortcut for settings

* fix: decrease size of progress bar

* chore: bump packages

* feat: add tests for statement import

* fix: settings dialog

* fix: show banner on small screens

* fix: show banner when no bank account set
2026-05-09 23:14:58 +05:30

1208 lines
35 KiB
CSS
Raw Blame History

@import "tailwindcss";
@import "tw-animate-css";
@font-face {
font-family: InterVariable;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/assets/frappe/css/fonts/inter/InterVariable.woff2") format("woff2");
}
@font-face {
font-family: InterVariable;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("/assets/frappe/css/fonts/inter/InterVariable-Italic.woff2") format("woff2");
}
@custom-variant dark (&:is(.dark *));
@theme inline {
--color-*: initial;
/** ----- Espresso Design System ----- **/
--font-sans: "InterVariable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-sans--font-optical-sizing: auto;
--font-sans--font-variation-settings: "opsz" 24;
--font-numeric: "InterVariable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-numeric--font-feature-settings: "calt", "cv01", "cv03", "cv04", "cv09", "cv11", "zero";
--font-numeric--font-optical-sizing: auto;
--font-numeric--font-variation-settings: "opsz" 24;
/** Font Sizes - Web **/
--text-2xs: 0.6875rem;
--text-2xs--line-height: 1.15;
--text-2xs--letter-spacing: 0.01em;
--text-2xs--font-weight: 420;
--text-xs: 0.75rem;
--text-xs--line-height: 1.15;
--text-xs--letter-spacing: 0.02em;
--text-xs--font-weight: 420;
--text-sm: 0.8125rem;
--text-sm--line-height: 1.15;
--text-sm--letter-spacing: 0.02em;
--text-sm--font-weight: 420;
--text-base: 0.875rem;
--text-base--line-height: 1.15;
--text-base--letter-spacing: 0.02em;
--text-base--font-weight: 420;
--text-lg: 1rem;
--text-lg--line-height: 1.15;
--text-lg--letter-spacing: 0.01em;
--text-lg--font-weight: 400;
--text-xl: 1.125rem;
--text-xl--line-height: 1.15;
--text-xl--letter-spacing: 0.01em;
--text-xl--font-weight: 400;
--text-2xl: 1.25rem;
--text-2xl--line-height: 1.15;
--text-2xl--letter-spacing: 0.01em;
--text-2xl--font-weight: 400;
--text-3xl: 1.5rem;
--text-3xl--line-height: 1.15;
--text-3xl--letter-spacing: 0.005em;
--text-3xl--font-weight: 400;
/* Paragraph font sizes */
--text-p-2xs: 0.6875rem;
--text-p-2xs--line-height: 1.6;
--text-p-2xs--letter-spacing: 0.01em;
--text-p-2xs--font-weight: 420;
--text-p-xs: 0.75rem;
--text-p-xs--line-height: 1.6;
--text-p-xs--letter-spacing: 0.02em;
--text-p-xs--font-weight: 420;
--text-p-sm: 0.8125rem;
--text-p-sm--line-height: 1.5;
--text-p-sm--letter-spacing: 0.02em;
--text-p-sm--font-weight: 420;
--text-p-base: 0.875rem;
--text-p-base--line-height: 1.5;
--text-p-base--letter-spacing: 0.02em;
--text-p-base--font-weight: 420;
--text-p-lg: 1rem;
--text-p-lg--line-height: 1.5;
--text-p-lg--letter-spacing: 0.02em;
--text-p-lg--font-weight: 400;
--text-p-xl: 1.125rem;
--text-p-xl--line-height: 1.42;
--text-p-xl--letter-spacing: 0.01em;
--text-p-xl--font-weight: 400;
--text-p-2xl: 1.25rem;
--text-p-2xl--line-height: 1.38;
--text-p-2xl--letter-spacing: 0.01em;
--text-p-2xl--font-weight: 400;
--text-p-3xl: 1.5rem;
--text-p-3xl--line-height: 1.2;
--text-p-3xl--letter-spacing: 0.005em;
--text-p-3xl--font-weight: 400;
/** Border Radius **/
--radius: 0.5rem;
--radius-sm: 0.25rem;
--radius-md: 0.625rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.25rem;
/** Shadow **/
--shadow-sm: var(--elevation-sm);
--shadow: var(--elevation-base);
--shadow-md: var(--elevation-md);
--shadow-lg: var(--elevation-lg);
--shadow-xl: var(--elevation-xl);
--shadow-2xl: var(--elevation-2xl);
--shadow-switch: 0px 3px 3px 0px rgba(0, 0, 0, 0.05);
--shadow-checkbox-hover: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
--shadow-textarea-active: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
/** Spacing **/
--spacing-4.5: 1.125rem;
--spacing-5.5: 1.375rem;
--spacing-6.5: 1.625rem;
--spacing-7.5: 1.875rem;
--spacing-8.5: 2.125rem;
--spacing-9.5: 2.375rem;
--spacing-10.5: 2.625rem;
--spacing-11.5: 2.875rem;
--spacing-12.5: 3.125rem;
--spacing-13: 3.25rem;
--spacing-13.5: 3.375rem;
--spacing-14.5: 3.625rem;
--spacing-15: 3.75rem;
--spacing-15.5: 3.875rem;
/** Colors **/
--color-white: var(--white);
--color-black: var(--black);
--color-gray-50: var(--gray-50);
--color-gray-100: var(--gray-100);
--color-gray-200: var(--gray-200);
--color-gray-300: var(--gray-300);
--color-gray-400: var(--gray-400);
--color-gray-450: var(--gray-450);
--color-gray-500: var(--gray-500);
--color-gray-600: var(--gray-600);
--color-gray-700: var(--gray-700);
--color-gray-800: var(--gray-800);
--color-gray-900: var(--gray-900);
--color-gray-950: var(--gray-950);
--color-red-50: var(--red-50);
--color-red-100: var(--red-100);
--color-red-200: var(--red-200);
--color-red-300: var(--red-300);
--color-red-400: var(--red-400);
--color-red-500: var(--red-500);
--color-red-600: var(--red-600);
--color-red-700: var(--red-700);
--color-red-800: var(--red-800);
--color-red-900: var(--red-900);
--color-red-950: var(--red-950);
--color-blue-50: var(--blue-50);
--color-blue-100: var(--blue-100);
--color-blue-200: var(--blue-200);
--color-blue-300: var(--blue-300);
--color-blue-400: var(--blue-400);
--color-blue-500: var(--blue-500);
--color-blue-600: var(--blue-600);
--color-blue-700: var(--blue-700);
--color-blue-800: var(--blue-800);
--color-blue-900: var(--blue-900);
--color-blue-950: var(--blue-950);
--color-green-50: var(--green-50);
--color-green-100: var(--green-100);
--color-green-200: var(--green-200);
--color-green-300: var(--green-300);
--color-green-400: var(--green-400);
--color-green-500: var(--green-500);
--color-green-600: var(--green-600);
--color-green-700: var(--green-700);
--color-green-800: var(--green-800);
--color-green-900: var(--green-900);
--color-green-950: var(--green-950);
--color-amber-50: var(--amber-50);
--color-amber-100: var(--amber-100);
--color-amber-200: var(--amber-200);
--color-amber-300: var(--amber-300);
--color-amber-400: var(--amber-400);
--color-amber-500: var(--amber-500);
--color-amber-600: var(--amber-600);
--color-amber-700: var(--amber-700);
--color-amber-800: var(--amber-800);
--color-amber-900: var(--amber-900);
--color-amber-950: var(--amber-950);
--color-orange-50: var(--orange-50);
--color-orange-100: var(--orange-100);
--color-orange-200: var(--orange-200);
--color-orange-300: var(--orange-300);
--color-orange-400: var(--orange-400);
--color-orange-500: var(--orange-500);
--color-orange-600: var(--orange-600);
--color-orange-700: var(--orange-700);
--color-orange-800: var(--orange-800);
--color-orange-900: var(--orange-900);
--color-orange-950: var(--orange-950);
--color-yellow-50: var(--yellow-50);
--color-yellow-100: var(--yellow-100);
--color-yellow-200: var(--yellow-200);
--color-yellow-300: var(--yellow-300);
--color-yellow-400: var(--yellow-400);
--color-yellow-500: var(--yellow-500);
--color-yellow-600: var(--yellow-600);
--color-yellow-700: var(--yellow-700);
--color-yellow-800: var(--yellow-800);
--color-yellow-900: var(--yellow-900);
--color-yellow-950: var(--yellow-950);
--color-teal-50: var(--teal-50);
--color-teal-100: var(--teal-100);
--color-teal-200: var(--teal-200);
--color-teal-300: var(--teal-300);
--color-teal-400: var(--teal-400);
--color-teal-500: var(--teal-500);
--color-teal-600: var(--teal-600);
--color-teal-700: var(--teal-700);
--color-teal-800: var(--teal-800);
--color-teal-900: var(--teal-900);
--color-teal-950: var(--teal-950);
--color-cyan-50: var(--cyan-50);
--color-cyan-100: var(--cyan-100);
--color-cyan-200: var(--cyan-200);
--color-cyan-300: var(--cyan-300);
--color-cyan-400: var(--cyan-400);
--color-cyan-500: var(--cyan-500);
--color-cyan-600: var(--cyan-600);
--color-cyan-700: var(--cyan-700);
--color-cyan-800: var(--cyan-800);
--color-cyan-900: var(--cyan-900);
--color-cyan-950: var(--cyan-950);
--color-purple-50: var(--purple-50);
--color-purple-100: var(--purple-100);
--color-purple-200: var(--purple-200);
--color-purple-300: var(--purple-300);
--color-purple-400: var(--purple-400);
--color-purple-500: var(--purple-500);
--color-purple-600: var(--purple-600);
--color-purple-700: var(--purple-700);
--color-purple-800: var(--purple-800);
--color-purple-900: var(--purple-900);
--color-purple-950: var(--purple-950);
--color-pink-50: var(--pink-50);
--color-pink-100: var(--pink-100);
--color-pink-200: var(--pink-200);
--color-pink-300: var(--pink-300);
--color-pink-400: var(--pink-400);
--color-pink-500: var(--pink-500);
--color-pink-600: var(--pink-600);
--color-pink-700: var(--pink-700);
--color-pink-800: var(--pink-800);
--color-pink-900: var(--pink-900);
--color-pink-950: var(--pink-950);
--color-violet-50: var(--violet-50);
--color-violet-100: var(--violet-100);
--color-violet-200: var(--violet-200);
--color-violet-300: var(--violet-300);
--color-violet-400: var(--violet-400);
--color-violet-500: var(--violet-500);
--color-violet-600: var(--violet-600);
--color-violet-700: var(--violet-700);
--color-violet-800: var(--violet-800);
--color-violet-900: var(--violet-900);
--color-violet-950: var(--violet-950);
/** Overlay colors **/
--color-white-50: var(--white-50);
--color-white-100: var(--white-100);
--color-white-200: var(--white-200);
--color-white-300: var(--white-300);
--color-white-400: var(--white-400);
--color-white-500: var(--white-500);
--color-white-600: var(--white-600);
--color-white-700: var(--white-700);
--color-white-800: var(--white-800);
--color-white-900: var(--white-900);
--color-black-50: var(--black-50);
--color-black-100: var(--black-100);
--color-black-200: var(--black-200);
--color-black-300: var(--black-300);
--color-black-400: var(--black-400);
--color-black-500: var(--black-500);
--color-black-600: var(--black-600);
--color-black-700: var(--black-700);
--color-black-800: var(--black-800);
--color-black-900: var(--black-900);
/** Ink Colors - used for text **/
--color-ink-white: var(--ink-white);
--color-ink-gray-1: var(--ink-gray-1);
--color-ink-gray-2: var(--ink-gray-2);
--color-ink-gray-3: var(--ink-gray-3);
--color-ink-gray-4: var(--ink-gray-4);
--color-ink-gray-5: var(--ink-gray-5);
--color-ink-gray-6: var(--ink-gray-6);
--color-ink-gray-7: var(--ink-gray-7);
--color-ink-gray-8: var(--ink-gray-8);
--color-ink-red-1: var(--ink-red-1);
--color-ink-red-2: var(--ink-red-2);
--color-ink-red-3: var(--ink-red-3);
--color-ink-red-4: var(--ink-red-4);
--color-ink-green-1: var(--ink-green-1);
--color-ink-green-2: var(--ink-green-2);
--color-ink-green-3: var(--ink-green-3);
--color-ink-green-4: var(--ink-green-4);
--color-ink-amber-1: var(--ink-amber-1);
--color-ink-amber-2: var(--ink-amber-2);
--color-ink-amber-3: var(--ink-amber-3);
--color-ink-amber-4: var(--ink-amber-4);
--color-ink-blue-1: var(--ink-blue-1);
--color-ink-blue-2: var(--ink-blue-2);
--color-ink-blue-3: var(--ink-blue-3);
--color-ink-blue-4: var(--ink-blue-4);
--color-ink-cyan-3: var(--ink-cyan-3);
--color-ink-violet-1: var(--ink-violet-1);
--color-ink-violet-2: var(--ink-violet-2);
--color-ink-violet-3: var(--ink-violet-3);
--color-ink-violet-4: var(--ink-violet-4);
--color-ink-blue-link: var(--ink-blue-link);
/** Surface Colors - used for backgrounds **/
--color-surface-white: var(--surface-white);
--color-surface-gray-1: var(--surface-gray-1);
--color-surface-gray-2: var(--surface-gray-2);
--color-surface-gray-3: var(--surface-gray-3);
--color-surface-gray-4: var(--surface-gray-4);
--color-surface-gray-5: var(--surface-gray-5);
--color-surface-gray-6: var(--surface-gray-6);
--color-surface-gray-7: var(--surface-gray-7);
--color-surface-red-1: var(--surface-red-1);
--color-surface-red-2: var(--surface-red-2);
--color-surface-red-3: var(--surface-red-3);
--color-surface-red-4: var(--surface-red-4);
--color-surface-red-5: var(--surface-red-5);
--color-surface-red-6: var(--surface-red-6);
--color-surface-red-7: var(--surface-red-7);
--color-surface-green-1: var(--surface-green-1);
--color-surface-green-2: var(--surface-green-2);
--color-surface-green-3: var(--surface-green-3);
--color-surface-green-4: var(--surface-green-4);
--color-surface-green-5: var(--surface-green-5);
--color-surface-green-6: var(--surface-green-6);
--color-surface-green-7: var(--surface-green-7);
--color-surface-amber-1: var(--surface-amber-1);
--color-surface-amber-2: var(--surface-amber-2);
--color-surface-amber-3: var(--surface-amber-3);
--color-surface-amber-4: var(--surface-amber-4);
--color-surface-amber-5: var(--surface-amber-5);
--color-surface-amber-6: var(--surface-amber-6);
--color-surface-amber-7: var(--surface-amber-7);
--color-surface-blue-1: var(--surface-blue-1);
--color-surface-blue-2: var(--surface-blue-2);
--color-surface-blue-3: var(--surface-blue-3);
--color-surface-blue-4: var(--surface-blue-4);
--color-surface-blue-5: var(--surface-blue-5);
--color-surface-blue-6: var(--surface-blue-6);
--color-surface-blue-7: var(--surface-blue-7);
--color-surface-orange-2: var(--surface-orange-2);
--color-surface-violet-2: var(--surface-violet-2);
--color-surface-violet-3: var(--surface-violet-3);
--color-surface-violet-4: var(--surface-violet-4);
--color-surface-violet-5: var(--surface-violet-5);
--color-surface-violet-6: var(--surface-violet-6);
--color-surface-violet-7: var(--surface-violet-7);
--color-surface-cyan-1: var(--surface-cyan-1);
--color-surface-cyan-2: var(--surface-cyan-2);
--color-surface-menu-bar: var(--surface-menu-bar);
--color-surface-cards: var(--surface-cards);
--color-surface-modal: var(--surface-modal);
--color-surface-selected: var(--surface-selected);
/** Outline Colors - used for borders/outlines **/
--color-outline-white: var(--outline-white);
--color-outline-gray-1: var(--outline-gray-1);
--color-outline-gray-2: var(--outline-gray-2);
--color-outline-gray-3: var(--outline-gray-3);
--color-outline-gray-4: var(--outline-gray-4);
--color-outline-gray-5: var(--outline-gray-5);
--color-outline-red-2: var(--outline-red-2);
--color-outline-red-3: var(--outline-red-3);
--color-outline-red-4: var(--outline-red-4);
--color-outline-green-2: var(--outline-green-2);
--color-outline-green-3: var(--outline-green-3);
--color-outline-green-4: var(--outline-green-4);
--color-outline-amber-2: var(--outline-amber-2);
--color-outline-amber-3: var(--outline-amber-3);
--color-outline-amber-4: var(--outline-amber-4);
--color-outline-blue-2: var(--outline-blue-2);
--color-outline-blue-3: var(--outline-blue-3);
--color-outline-blue-4: var(--outline-blue-4);
--color-outline-orange-3: var(--outline-orange-3);
--color-outline-violet-2: var(--outline-violet-2);
--color-outline-violet-3: var(--outline-violet-3);
--color-outline-violet-4: var(--outline-violet-4);
--color-outline-gray-modals: var(--outline-gray-modals);
/** Focus Shadows **/
--shadow-focus-gray: var(--focus-shadow-gray);
--shadow-focus-blue: var(--focus-shadow-blue);
--shadow-focus-green: var(--focus-shadow-green);
--shadow-focus-red: var(--focus-shadow-red);
--shadow-focus-amber: var(--focus-shadow-amber);
}
:root {
/** Espresso Design System Colors - TODO: Convert these to oklch colors later when Espresso supports it
950 and 900 are the same in light mode
**/
--white: #FFFFFF;
--black: #000000;
--gray-50: #F8F8F8;
--gray-100: #F3F3F3;
--gray-200: #EDEDED;
--gray-300: #E2E2E2;
--gray-400: #C7C7C7;
--gray-450: #C7C7C7;
--gray-500: #999999;
--gray-600: #7C7C7C;
--gray-700: #525252;
--gray-800: #383838;
--gray-900: #171717;
--gray-950: #171717;
--blue-50: #F2F9FF;
--blue-100: #E6F4FF;
--blue-200: #C8E6FF;
--blue-300: #A7D7FD;
--blue-400: #73BBF6;
--blue-500: #0289F7;
--blue-600: #007BE0;
--blue-700: #0070CC;
--blue-800: #005CA3;
--blue-900: #004880;
--blue-950: #004880;
--green-50: #F2FDF4;
--green-100: #E4FAEB;
--green-200: #C3F9D3;
--green-300: #A6EFC0;
--green-400: #86E0A8;
--green-500: #46B37E;
--green-600: #278F5E;
--green-700: #137949;
--green-800: #075E35;
--green-900: #173B2C;
--green-950: #173B2C;
--red-50: #FFF7F7;
--red-100: #FFE7E7;
--red-200: #FFD8D8;
--red-300: #FDC2C2;
--red-400: #F79596;
--red-500: #E03636;
--red-600: #CC2929;
--red-700: #B52A2A;
--red-800: #941F1F;
--red-900: #6B1515;
--red-950: #6B1515;
--amber-50: #FDFAED;
--amber-100: #FFF7D3;
--amber-200: #FEEDA9;
--amber-300: #FBDB73;
--amber-400: #FBCC55;
--amber-500: #E79913;
--amber-600: #DB7706;
--amber-700: #B35309;
--amber-800: #91400D;
--amber-900: #763813;
--amber-950: #763813;
--orange-50: #FFF9F5;
--orange-100: #FFEFE4;
--orange-200: #FFDEC5;
--orange-300: #FFCBA3;
--orange-400: #F4B07F;
--orange-500: #E86C13;
--orange-600: #D45A08;
--orange-700: #BD3E0C;
--orange-800: #9E3513;
--orange-900: #6B2711;
--orange-950: #6B2711;
--yellow-50: #FFFCEF;
--yellow-100: #FFF7D3;
--yellow-200: #F7E9A8;
--yellow-300: #F5E171;
--yellow-400: #F2D14B;
--yellow-500: #EDBA13;
--yellow-600: #D1930D;
--yellow-700: #AB6E05;
--yellow-800: #8C5600;
--yellow-900: #733F12;
--yellow-950: #733F12;
--teal-50: #F0FDFA;
--teal-100: #E6F7F4;
--teal-200: #BAE8E1;
--teal-300: #97DED4;
--teal-400: #73D1C4;
--teal-500: #36BAAD;
--teal-600: #0B9E92;
--teal-700: #0F736B;
--teal-800: #115C57;
--teal-900: #114541;
--teal-950: #114541;
--cyan-50: #F5FBFC;
--cyan-100: #DDF7FF;
--cyan-200: #B3E8F7;
--cyan-300: #99E2F8;
--cyan-400: #72D5F3;
--cyan-500: #3BBDE5;
--cyan-600: #32A4C7;
--cyan-700: #267A94;
--cyan-800: #125C73;
--cyan-900: #164759;
--cyan-950: #164759;
--purple-50: #FDFAFF;
--purple-100: #F6E9FF;
--purple-200: #ECD3FF;
--purple-300: #E2B9FC;
--purple-400: #CFA1F2;
--purple-500: #9C45E3;
--purple-600: #8642C2;
--purple-700: #6E399D;
--purple-800: #5C2F83;
--purple-900: #401863;
--purple-950: #401863;
--pink-50: #FFF7FC;
--pink-100: #FDE8F5;
--pink-200: #FFD5F0;
--pink-300: #F9B9E0;
--pink-400: #F6A7D6;
--pink-500: #E34AA6;
--pink-600: #CF3A96;
--pink-700: #9C2671;
--pink-800: #801458;
--pink-900: #570F3E;
--pink-950: #570F3E;
--violet-50: #FBFAFF;
--violet-100: #F0EBFF;
--violet-200: #DBD5FF;
--violet-300: #C9BAFB;
--violet-400: #B3A1F5;
--violet-500: #6846E3;
--violet-600: #5F46C7;
--violet-700: #4F3DA1;
--violet-800: #392980;
--violet-900: #251959;
--violet-950: #251959;
/** Overlay colors **/
--white-50: rgba(255, 255, 255, 0.10);
--white-100: rgba(255, 255, 255, 0.18);
--white-200: rgba(255, 255, 255, 0.27);
--white-300: rgba(255, 255, 255, 0.36);
--white-400: rgba(255, 255, 255, 0.45);
--white-500: rgba(255, 255, 255, 0.54);
--white-600: rgba(255, 255, 255, 0.63);
--white-700: rgba(255, 255, 255, 0.72);
--white-800: rgba(255, 255, 255, 0.81);
--white-900: rgba(255, 255, 255, 0.90);
--black-50: rgba(0, 0, 0, 0.09);
--black-100: rgba(0, 0, 0, 0.18);
--black-200: rgba(0, 0, 0, 0.27);
--black-300: rgba(0, 0, 0, 0.36);
--black-400: rgba(0, 0, 0, 0.45);
--black-500: rgba(0, 0, 0, 0.54);
--black-600: rgba(0, 0, 0, 0.63);
--black-700: rgba(0, 0, 0, 0.72);
--black-800: rgba(0, 0, 0, 0.81);
--black-900: rgba(0, 0, 0, 0.90);
/** Ink Colors - used for text **/
--ink-white: var(--white);
--ink-gray-1: var(--gray-200);
--ink-gray-2: var(--gray-300);
--ink-gray-3: var(--gray-400);
--ink-gray-4: var(--gray-500);
--ink-gray-5: var(--gray-600);
--ink-gray-6: var(--gray-700);
--ink-gray-7: var(--gray-800);
--ink-gray-8: var(--gray-900);
--ink-red-1: var(--red-50);
--ink-red-2: var(--red-400);
--ink-red-3: var(--red-500);
--ink-red-4: var(--red-700);
--ink-green-1: var(--green-50);
--ink-green-2: var(--green-400);
--ink-green-3: var(--green-500);
--ink-green-4: var(--green-700);
--ink-amber-1: var(--amber-50);
--ink-amber-2: var(--amber-400);
--ink-amber-3: var(--amber-500);
--ink-amber-4: var(--amber-700);
--ink-blue-1: var(--blue-50);
--ink-blue-2: var(--blue-400);
--ink-blue-3: var(--blue-500);
--ink-blue-4: var(--blue-700);
--ink-cyan-3: var(--cyan-500);
--ink-violet-1: var(--violet-50);
--ink-violet-2: var(--violet-400);
--ink-violet-3: var(--violet-500);
--ink-violet-4: var(--violet-700);
--ink-blue-link: var(--blue-400);
/** Surface Colors - used for backgrounds **/
--surface-white: var(--white);
--surface-gray-1: var(--gray-50);
--surface-gray-2: var(--gray-100);
--surface-gray-3: var(--gray-200);
--surface-gray-4: var(--gray-300);
--surface-gray-5: var(--gray-700);
--surface-gray-6: var(--gray-800);
--surface-gray-7: var(--gray-900);
--surface-red-1: var(--red-50);
--surface-red-2: var(--red-100);
--surface-red-3: var(--red-200);
--surface-red-4: var(--red-300);
--surface-red-5: var(--red-600);
--surface-red-6: var(--red-700);
--surface-red-7: var(--red-800);
--surface-green-1: var(--green-50);
--surface-green-2: var(--green-100);
--surface-green-3: var(--green-200);
--surface-green-4: var(--green-300);
--surface-green-5: var(--green-600);
--surface-green-6: var(--green-700);
--surface-green-7: var(--green-800);
--surface-amber-1: var(--amber-50);
--surface-amber-2: var(--amber-100);
--surface-amber-3: var(--amber-200);
--surface-amber-4: var(--amber-300);
--surface-amber-5: var(--amber-600);
--surface-amber-6: var(--amber-700);
--surface-amber-7: var(--amber-800);
--surface-blue-1: var(--blue-50);
--surface-blue-2: var(--blue-100);
--surface-blue-3: var(--blue-200);
--surface-blue-4: var(--blue-300);
--surface-blue-5: var(--blue-600);
--surface-blue-6: var(--blue-700);
--surface-blue-7: var(--blue-800);
--surface-orange-2: var(--orange-100);
--surface-violet-2: var(--violet-100);
--surface-violet-3: var(--violet-200);
--surface-violet-4: var(--violet-300);
--surface-violet-5: var(--violet-600);
--surface-violet-6: var(--violet-700);
--surface-violet-7: var(--violet-800);
--surface-cyan-2: var(--cyan-100);
--surface-menu-bar: var(--gray-50);
--surface-cards: var(--white);
--surface-modal: var(--white);
--surface-selected: var(--white);
/** Outline Colors - used for borders/outlines **/
--outline-white: var(--white);
--outline-gray-1: var(--gray-200);
--outline-gray-2: var(--gray-300);
--outline-gray-3: var(--gray-400);
--outline-gray-4: var(--gray-500);
--outline-gray-5: var(--gray-800);
--outline-red-2: var(--red-300);
--outline-red-3: var(--red-400);
--outline-red-4: var(--red-500);
--outline-green-2: var(--green-300);
--outline-green-3: var(--green-400);
--outline-green-4: var(--green-500);
--outline-amber-2: var(--amber-300);
--outline-amber-3: var(--amber-400);
--outline-amber-4: var(--amber-500);
--outline-blue-2: var(--blue-300);
--outline-blue-3: var(--blue-400);
--outline-blue-4: var(--blue-500);
--outline-orange-3: var(--orange-400);
--outline-violet-2: var(--violet-300);
--outline-violet-3: var(--violet-400);
--outline-violet-4: var(--violet-500);
--outline-gray-modals: var(--gray-200);
/** Focus Box Shadows **/
--focus-shadow-gray: 0px 0px 0px 2px rgba(201, 201, 201, 0.9);
--focus-shadow-blue: 0px 0px 0px 2px rgba(101, 185, 252, 0.9);
--focus-shadow-green: 0px 0px 0px 2px rgba(94, 210, 156, 0.9);
--focus-shadow-red: 0px 0px 0px 2px rgba(250, 156, 157, 0.9);
--focus-shadow-amber: 0px 0px 0px 2px rgba(255, 218, 124, 0.9);
/** Elevations **/
--elevation-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.14), 0px 0.25px 1.5px 0px rgba(255, 255, 255, 0.08) inset;
--elevation-base: 0px 2px 5px 0px rgba(0, 0, 0, 0.14), 0px 0px 1.5px 0px rgba(0, 0, 0, 0.16), 0px 0.25px 1.5px 0px rgba(255, 255, 255, 0.08) inset;
--elevation-md: 0px 6px 12px -2px rgba(0, 0, 0, 0.12), 0px 0px 6px 2px rgba(0, 0, 0, 0.03), 0px 0px 1.5px 0px rgba(0, 0, 0, 0.15), 0px 0.25px 1.5px 0px rgba(255, 255, 255, 0.08) inset;
--elevation-lg: 0px 18px 22px -6px rgba(0, 0, 0, 0.1), 0px 0px 6px 3px rgba(0, 0, 0, 0.03), 0px 0px 1.5px 0px rgba(0, 0, 0, 0.18);
--elevation-xl: 0px 24px 30px -8px rgba(0, 0, 0, 0.1), 0px 0px 10px 2px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.2), 0px 0.25px 2px 0px rgba(255, 255, 255, 0.15) inset;
--elevation-2xl: 0px 44px 52px -10px rgba(0, 0, 0, 0.1), 0px 0px 10px 2px rgba(0, 0, 0, 0.03), 0px 0px 1.5px 0px rgba(0, 0, 0, 0.25), 0px 0.1px 2px 0px rgba(255, 255, 255, 0.08) inset;
}
.dark {
/** Espresso Design System Colors - TODO: Convert these to oklch colors later when Espresso supports it **/
--gray-50: #F8F8F8;
--gray-100: #D9D9D9;
--gray-200: #AFAFAF;
--gray-250: #999999;
--gray-300: #808080;
--gray-400: #717171;
--gray-450: #575757;
--gray-500: #424242;
--gray-600: #343434;
--gray-700: #2B2B2B;
--gray-800: #232323;
--gray-900: #1C1C1C;
--gray-950: #0F0F0F;
--blue-50: #C9E0F5;
--blue-100: #ADD2F5;
--blue-200: #8CC1EC;
--blue-300: #5AAEF2;
--blue-400: #3294E3;
--blue-500: #1580D8;
--blue-600: #155999;
--blue-700: #063D71;
--blue-800: #052B53;
--blue-900: #0E2037;
--blue-950: #0B192C;
--green-50: #C8F3DE;
--green-100: #9BE6C1;
--green-200: #78D7A9;
--green-300: #58C08E;
--green-400: #1DB269;
--green-500: #0C9150;
--green-600: #077241;
--green-700: #035831;
--green-800: #0A3F27;
--green-900: #0B2E1C;
--green-950: #0C2016;
--red-50: #FFDEDE;
--red-100: #FFC1C1;
--red-200: #FE7C7C;
--red-300: #EB4D52;
--red-400: #D82727;
--red-500: #B01F1F;
--red-600: #862020;
--red-700: #661717;
--red-800: #521515;
--red-900: #3C1316;
--red-950: #2A0C0C;
--amber-50: #FFE59A;
--amber-100: #F4C25F;
--amber-200: #FFAA3E;
--amber-300: #FA961F;
--amber-400: #E27E1B;
--amber-500: #CB6D10;
--amber-600: #975215;
--amber-700: #753A07;
--amber-800: #4B2606;
--amber-900: #371E06;
--amber-950: #281808;
--orange-50: #FFCDAD;
--orange-100: #FFA873;
--orange-200: #FA8A40;
--orange-300: #DE6D1B;
--orange-400: #C45A0E;
--orange-500: #984509;
--orange-600: #823906;
--orange-700: #683108;
--orange-800: #532707;
--orange-900: #361C09;
--orange-950: #261407;
--yellow-50: #FFEEB8;
--yellow-100: #FFE386;
--yellow-200: #F8D76A;
--yellow-300: #ECC02E;
--yellow-400: #DAAE15;
--yellow-500: #C69C12;
--yellow-600: #9C7A0A;
--yellow-700: #705606;
--yellow-800: #5B4605;
--yellow-900: #3F3004;
--yellow-950: #322604;
--teal-50: #A0F7ED;
--teal-100: #7EF3E7;
--teal-200: #51DECF;
--teal-300: #28BCAC;
--teal-400: #1C988B;
--teal-500: #1B7169;
--teal-600: #145B54;
--teal-700: #0B4942;
--teal-800: #0B3A35;
--teal-900: #0A2D29;
--teal-950: #0A211E;
--cyan-50: #D0F0FA;
--cyan-100: #95E3F6;
--cyan-200: #62CAE9;
--cyan-300: #3CB8DC;
--cyan-400: #1D94B9;
--cyan-500: #107B9B;
--cyan-600: #14667F;
--cyan-700: #104F62;
--cyan-800: #0D3B49;
--cyan-900: #0C2D37;
--cyan-950: #0C242D;
--purple-50: #E5C6FB;
--purple-100: #D9AFF5;
--purple-200: #C993EF;
--purple-300: #B168E8;
--purple-400: #984BD8;
--purple-500: #7A2DB9;
--purple-600: #622195;
--purple-700: #491870;
--purple-800: #391457;
--purple-900: #270E3B;
--purple-950: #1F112A;
--pink-50: #FFBBE4;
--pink-100: #F69AD1;
--pink-200: #ED77BE;
--pink-300: #E359AB;
--pink-400: #CB4394;
--pink-500: #AC377D;
--pink-600: #892660;
--pink-700: #6F1D4D;
--pink-800: #5B183F;
--pink-900: #42132F;
--pink-950: #341126;
--violet-50: #CDBEFF;
--violet-100: #BCA9FC;
--violet-200: #9F87ED;
--violet-300: #9478F8;
--violet-400: #8363F1;
--violet-500: #5A3EBA;
--violet-600: #403397;
--violet-700: #3D3286;
--violet-800: #291D64;
--violet-900: #1D1643;
--violet-950: #161130;
/** Ink Colors - used for text **/
--ink-white: var(--gray-950);
--ink-gray-1: var(--gray-800);
--ink-gray-2: var(--gray-500);
--ink-gray-3: var(--gray-450);
--ink-gray-4: var(--gray-400);
--ink-gray-5: var(--gray-300);
--ink-gray-6: var(--gray-200);
--ink-gray-7: var(--gray-100);
--ink-gray-8: var(--gray-50);
--ink-red-1: var(--white);
--ink-red-2: var(--red-700);
--ink-red-3: var(--red-400);
--ink-red-4: var(--red-300);
--ink-green-1: var(--white);
--ink-green-2: var(--green-700);
--ink-green-3: var(--green-400);
--ink-green-4: var(--green-300);
--ink-amber-1: var(--white);
--ink-amber-2: var(--amber-700);
--ink-amber-3: var(--amber-400);
--ink-amber-4: var(--amber-300);
--ink-blue-1: var(--white);
--ink-blue-2: var(--blue-700);
--ink-blue-3: var(--blue-400);
--ink-blue-4: var(--blue-300);
--ink-cyan-3: var(--cyan-400);
--ink-violet-1: var(--white);
--ink-violet-2: var(--violet-700);
--ink-violet-3: var(--violet-400);
--ink-violet-4: var(--violet-300);
--ink-pink-1: var(--white);
--ink-pink-2: var(--pink-700);
--ink-pink-3: var(--pink-400);
--ink-pink-4: var(--pink-300);
--ink-blue-link: var(--blue-500);
/** Surface Colors - used for backgrounds **/
--surface-white: var(--gray-950);
--surface-gray-1: var(--gray-800);
--surface-gray-2: var(--gray-700);
--surface-gray-3: var(--gray-600);
--surface-gray-4: var(--gray-500);
--surface-gray-5: var(--gray-200);
--surface-gray-6: var(--gray-100);
--surface-gray-7: var(--gray-50);
--surface-red-1: var(--red-950);
--surface-red-2: var(--red-900);
--surface-red-3: var(--red-800);
--surface-red-4: var(--red-700);
--surface-red-5: var(--red-500);
--surface-red-6: var(--red-400);
--surface-red-7: var(--red-600);
--surface-green-1: var(--green-950);
--surface-green-2: var(--green-900);
--surface-green-3: var(--green-800);
--surface-green-4: var(--green-700);
--surface-green-5: var(--green-500);
--surface-green-6: var(--green-400);
--surface-green-7: var(--green-600);
--surface-amber-1: var(--amber-950);
--surface-amber-2: var(--amber-900);
--surface-amber-3: var(--amber-800);
--surface-amber-4: var(--amber-700);
--surface-amber-5: var(--amber-500);
--surface-amber-6: var(--amber-400);
--surface-amber-7: var(--amber-600);
--surface-blue-1: var(--blue-950);
--surface-blue-2: var(--blue-900);
--surface-blue-3: var(--blue-800);
--surface-blue-4: var(--blue-700);
--surface-blue-5: var(--blue-500);
--surface-blue-6: var(--blue-400);
--surface-blue-7: var(--blue-600);
--surface-orange-2: var(--orange-900);
--surface-violet-2: var(--violet-900);
--surface-violet-3: var(--violet-800);
--surface-violet-4: var(--violet-700);
--surface-violet-5: var(--violet-500);
--surface-violet-6: var(--violet-400);
--surface-violet-7: var(--violet-600);
--surface-cyan-2: var(--cyan-900);
--surface-menu-bar: var(--gray-950);
--surface-cards: var(--gray-900);
--surface-modal: var(--gray-800);
--surface-selected: var(--gray-600);
/** Outline Colors - used for borders/outlines **/
--outline-white: var(--gray-950);
--outline-gray-1: var(--gray-800);
--outline-gray-2: var(--gray-600);
--outline-gray-3: var(--gray-500);
--outline-gray-4: var(--gray-450);
--outline-gray-5: var(--gray-200);
--outline-red-2: var(--red-800);
--outline-red-3: var(--red-700);
--outline-red-4: var(--red-600);
--outline-green-2: var(--green-800);
--outline-green-3: var(--green-700);
--outline-green-4: var(--green-600);
--outline-amber-2: var(--amber-800);
--outline-amber-3: var(--amber-700);
--outline-amber-4: var(--amber-600);
--outline-blue-2: var(--blue-800);
--outline-blue-3: var(--blue-700);
--outline-blue-4: var(--blue-600);
--outline-orange-3: var(--orange-700);
--outline-violet-2: var(--violet-800);
--outline-violet-3: var(--violet-700);
--outline-violet-4: var(--violet-600);
--outline-gray-modals: var(--gray-600);
/** Focus Box Shadows **/
--focus-shadow-gray: 0px 0px 0px 3px rgba(70, 70, 70, 0.8);
--focus-shadow-blue: 0px 0px 0px 3px rgba(14, 61, 98, 0.8);
--focus-shadow-green: 0px 0px 0px 3px rgba(29, 86, 59, 0.8);
--focus-shadow-red: 0px 0px 0px 3px rgba(117, 24, 25, 0.8);
--focus-shadow-amber: 0px 0px 0px 3px rgba(116, 72, 17, 0.8);
/** Elevations **/
--elevation-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.7), 0px 0px 14px 0px rgba(0, 0, 0, 0.18), 0px 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.03) inset;
--elevation-base: 0px 2px 5px 0px rgba(0, 0, 0, 0.6), 0px 0px 14px 0px rgba(0, 0, 0, 0.18), 0px 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.03) inset;
--elevation-md: 0px 6px 12px -2px rgba(0, 0, 0, 0.6), 0px 0px 16px 2px rgba(0, 0, 0, 0.2), 0px 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.03) inset;
--elevation-lg: 0px 18px 20px -8px rgba(0, 0, 0, 0.52), 0px 0px 16px 0px rgba(0, 0, 0, 0.1), 0px 0.5px 1.5px 0.5px rgba(255, 255, 255, 0.04) inset;
--elevation-xl: 0px 26px 34px -6px rgba(0, 0, 0, 0.42), 0px 0px 14px 2px rgba(0, 0, 0, 0.12), 0px 0.5px 1.5px 0.5px rgba(255, 255, 255, 0.04) inset;
--elevation-2xl: 0px 44px 52px -4px rgba(0, 0, 0, 0.42), 0px 0px 14px 10px rgba(0, 0, 0, 0.12), 0px 0.5px 1.5px 0.5px rgba(255, 255, 255, 0.06) inset;
}
@layer base {
* {
@apply border-outline-gray-modals outline-outline-gray-modals/50;
}
body {
@apply bg-surface-white text-ink-gray-8;
}
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.lucide {
stroke-linecap: round;
stroke-linejoin: round;
}
/** @shadcn/tailwind.css **/
@theme inline {
@keyframes accordion-down {
from {
height: 0;
}
to {
height: var(--radix-accordion-content-height,
var(--accordion-panel-height, auto));
}
}
@keyframes accordion-up {
from {
height: var(--radix-accordion-content-height,
var(--accordion-panel-height, auto));
}
to {
height: 0;
}
}
}
/* Custom variants */
@custom-variant data-open {
&:where([data-state="open"]),
&:where([data-open]:not([data-open="false"])) {
@slot;
}
}
@custom-variant data-closed {
&:where([data-state="closed"]),
&:where([data-closed]:not([data-closed="false"])) {
@slot;
}
}
@custom-variant data-checked {
&:where([data-state="checked"]),
&:where([data-checked]:not([data-checked="false"])) {
@slot;
}
}
@custom-variant data-unchecked {
&:where([data-state="unchecked"]),
&:where([data-unchecked]:not([data-unchecked="false"])) {
@slot;
}
}
@custom-variant data-selected {
&:where([data-selected="true"]) {
@slot;
}
}
@custom-variant data-disabled {
&:where([data-disabled="true"]),
&:where([data-disabled]:not([data-disabled="false"])) {
@slot;
}
}
@custom-variant data-active {
&:where([data-state="active"]),
&:where([data-active]:not([data-active="false"])) {
@slot;
}
}
@custom-variant data-horizontal {
&:where([data-orientation="horizontal"]) {
@slot;
}
}
@custom-variant data-vertical {
&:where([data-orientation="vertical"]) {
@slot;
}
}
@utility no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
Reference in New Issue View Git Blame Copy Permalink