From d7b42abb1e9408c694a88be7cb89ccf6fbcd707e Mon Sep 17 00:00:00 2001 From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> Date: Tue, 10 Feb 2026 18:03:53 +0530 Subject: [PATCH 001/317] feat: add two rows Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> --- .../src/components/timesheet/index.ts | 2 + .../src/components/timesheet/rows.mdx | 17 ++++ .../timesheet/rows/rowHeader.stories.tsx | 12 +++ .../components/timesheet/rows/rowHeader.tsx | 21 +++++ .../timesheet/rows/rowWeek.stories.tsx | 21 +++++ .../src/components/timesheet/rows/rowWeek.tsx | 92 +++++++++++++++++++ packages/frappe-ui-react/tsconfig.json | 2 - 7 files changed, 165 insertions(+), 2 deletions(-) create mode 100644 packages/frappe-ui-react/src/components/timesheet/index.ts create mode 100644 packages/frappe-ui-react/src/components/timesheet/rows.mdx create mode 100644 packages/frappe-ui-react/src/components/timesheet/rows/rowHeader.stories.tsx create mode 100644 packages/frappe-ui-react/src/components/timesheet/rows/rowHeader.tsx create mode 100644 packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.stories.tsx create mode 100644 packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.tsx diff --git a/packages/frappe-ui-react/src/components/timesheet/index.ts b/packages/frappe-ui-react/src/components/timesheet/index.ts new file mode 100644 index 00000000..34fb2d31 --- /dev/null +++ b/packages/frappe-ui-react/src/components/timesheet/index.ts @@ -0,0 +1,2 @@ +export { RowHeader } from "./rows/rowHeader"; +export { RowWeek } from "./rows/rowWeek"; diff --git a/packages/frappe-ui-react/src/components/timesheet/rows.mdx b/packages/frappe-ui-react/src/components/timesheet/rows.mdx new file mode 100644 index 00000000..4e88be7a --- /dev/null +++ b/packages/frappe-ui-react/src/components/timesheet/rows.mdx @@ -0,0 +1,17 @@ +import { Canvas, Meta } from "@storybook/addon-docs/blocks"; + +import * as rowHeaderStories from "./rows/rowHeader.stories"; +import * as rowWeekStories from "./rows/rowWeek.stories"; + + + +# Header Row + + + +# Row Week + + + + + diff --git a/packages/frappe-ui-react/src/components/timesheet/rows/rowHeader.stories.tsx b/packages/frappe-ui-react/src/components/timesheet/rows/rowHeader.stories.tsx new file mode 100644 index 00000000..c776b248 --- /dev/null +++ b/packages/frappe-ui-react/src/components/timesheet/rows/rowHeader.stories.tsx @@ -0,0 +1,12 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { RowHeader } from "./rowHeader"; + +const meta: Meta = { + title: "Components/Timesheet/RowHeader", + component: RowHeader, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/frappe-ui-react/src/components/timesheet/rows/rowHeader.tsx b/packages/frappe-ui-react/src/components/timesheet/rows/rowHeader.tsx new file mode 100644 index 00000000..75baaf24 --- /dev/null +++ b/packages/frappe-ui-react/src/components/timesheet/rows/rowHeader.tsx @@ -0,0 +1,21 @@ +export const RowHeader: React.FC = () => { + return ( +
+
+
+ Week / Project / Member / Task +
+
+ Mon + Tue + Wed + Thu + Fri + Sat + Sun + Total +
+
+
+ ); +}; diff --git a/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.stories.tsx b/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.stories.tsx new file mode 100644 index 00000000..b02ecf0c --- /dev/null +++ b/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { RowWeek } from "./rowWeek"; + +const meta: Meta = { + title: "Components/Timesheet/RowWeek", + component: RowWeek, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + thisWeek: true, + status: "not-submitted", + dates: ["Dec 29", "Dec 30", "Dec 31", "Jan 1", "Jan 2", "Jan 3", "Jan 4"], + }, + render: (args) => { + return ; + }, +}; diff --git a/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.tsx b/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.tsx new file mode 100644 index 00000000..798f127d --- /dev/null +++ b/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.tsx @@ -0,0 +1,92 @@ +import { ChevronDown, ChevronRight, Send, Check, X, Clock } from "lucide-react"; +import { Badge, type BadgeProps } from "../../badge"; + +type RowWeekStatus = + | "not-submitted" + | "approved" + | "rejected" + | "approval-pending"; + +export interface RowWeekProps { + nesting?: number; + collapsed?: boolean; + status?: RowWeekStatus; + thisWeek?: boolean; + onToggle?: () => void; + dates: string[]; +} + +const statusTheme: Record = { + "not-submitted": "gray", + approved: "green", + rejected: "red", + "approval-pending": "orange", +}; + +const statusLabel: Record = { + "not-submitted": "Not Submitted", + approved: "Approved", + rejected: "Rejected", + "approval-pending": "Approval Pending", +}; + +export const RowWeek: React.FC = ({ + nesting = 0, + collapsed = false, + status, + thisWeek = false, + dates, + onToggle, +}) => { + return ( +
+
+
+ + This Week + {status && ( + {statusLabel[status]} + )} +
+
+ {dates.map((date) => ( + + {date} + + ))} + + Total + + {status === "not-submitted" && thisWeek && ( + + )} + + {status === "approved" && thisWeek && ( + + )} + {status === "rejected" && thisWeek && ( + + )} + {status === "approval-pending" && thisWeek && ( + + )} +
+
+
+ ); +}; diff --git a/packages/frappe-ui-react/tsconfig.json b/packages/frappe-ui-react/tsconfig.json index 9676ca63..cd9753ea 100644 --- a/packages/frappe-ui-react/tsconfig.json +++ b/packages/frappe-ui-react/tsconfig.json @@ -21,8 +21,6 @@ "dist-types", "src/utils/tailwind.config.cjs", "**/*.test.ts", - "**/*.stories.ts", - "**/*.stories.tsx", "**/tests/**/*.ts", "**/tests/**/*.tsx" ] From 9942af8927b1d3924978c950f18311319346e11b Mon Sep 17 00:00:00 2001 From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> Date: Thu, 19 Feb 2026 12:01:48 +0530 Subject: [PATCH 002/317] feat: add color tokens Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> --- .storybook/preview.ts | 2 +- packages/frappe-ui-react/package.json | 3 +- .../themeShowCase/color-pallete-dark.mdx | 808 ++++++++++++++++++ .../themeShowCase/color-pallete-light.mdx | 804 +++++++++++++++++ .../themeShowCase/color-styles.stories.tsx | 215 +++++ .../src/components/timesheet/rows.mdx | 15 +- packages/frappe-ui-react/src/theme.css | 611 +++++++------ packages/frappe-ui-react/tsconfig.json | 1 + pnpm-lock.yaml | 8 +- 9 files changed, 2203 insertions(+), 264 deletions(-) create mode 100644 packages/frappe-ui-react/src/components/themeShowCase/color-pallete-dark.mdx create mode 100644 packages/frappe-ui-react/src/components/themeShowCase/color-pallete-light.mdx create mode 100644 packages/frappe-ui-react/src/components/themeShowCase/color-styles.stories.tsx diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 0073f389..c59f9e82 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -53,7 +53,7 @@ const preview: Preview = { }, options: { storySort: { - order: ["Getting Started", "Theme", "Components"], + order: ["Getting Started", "DesignSystem", "Theme", "Components"], }, }, }, diff --git a/packages/frappe-ui-react/package.json b/packages/frappe-ui-react/package.json index b0eca500..eb3e880b 100644 --- a/packages/frappe-ui-react/package.json +++ b/packages/frappe-ui-react/package.json @@ -69,8 +69,7 @@ "react-grid-layout": "^1.5.3", "react-resizable": "^3.1.3", "styled-components": "^6.3.8", - "tailwind-merge": "^3.4.0", - "tailwindcss": "^4.1.18" + "tailwind-merge": "^3.4.0" }, "devDependencies": { "@types/feather-icons": "^4.29.4", diff --git a/packages/frappe-ui-react/src/components/themeShowCase/color-pallete-dark.mdx b/packages/frappe-ui-react/src/components/themeShowCase/color-pallete-dark.mdx new file mode 100644 index 00000000..34c0cb6a --- /dev/null +++ b/packages/frappe-ui-react/src/components/themeShowCase/color-pallete-dark.mdx @@ -0,0 +1,808 @@ +import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks'; + + + +export const containerStyle = { display: "flex", gap: "20px", flexWrap: "wrap" }; +export const swatchBox = { width: "90px", height: "90px", border:"1px solid", borderRadius: "8px"}; +export const labelStyle = { marginTop: "10px", fontSize: "14px", fontWeight: "600", color: "#000" }; +export const hexStyle = { fontSize: "12px", color: "#000" }; +export const h1Style = { color: "#000" }; +export const h2Style = { color: "#000" }; +export const h3Style = { color: "#000" }; + + +

Colour palette - Dark mode

+ +

Primary color

+ +

Dark Gray

+ +
+
+
+
dark-gray-50
+
#F8F8F8
+
+
+
+
dark-gray-100
+
#D9D9D9
+
+
+
+
dark-gray-200
+
#AFAFAF
+
+
+
+
dark-gray-300
+
#808080
+
+
+
+
dark-gray-400
+
#717171
+
+
+
+
dark-gray-450
+
#575757
+
+
+
+
dark-gray-500
+
#424242
+
+
+
+
dark-gray-600
+
#343434
+
+
+
+
dark-gray-700
+
#2B2B2B
+
+
+
+
dark-gray-800
+
#232323
+
+
+
+
dark-gray-900
+
#1C1C1C
+
+
+
+
dark-gray-950
+
#0F0F0F
+
+
+ +

Functional UI

+ +

Blue-Information

+ +
+
+
+
dark-blue-50
+
#C9E0F5
+
+
+
+
dark-blue-100
+
#ADD2F5
+
+
+
+
dark-blue-200
+
#8CC1EC
+
+
+
+
dark-blue-300
+
#5AAEF2
+
+
+
+
dark-blue-400
+
#3294E3
+
+
+
+
dark-blue-500
+
#1580D8
+
+
+
+
dark-blue-600
+
#155999
+
+
+
+
dark-blue-700
+
#063D71
+
+
+
+
dark-blue-800
+
#052B53
+
+
+
+
dark-blue-900
+
#0E2037
+
+
+
+
dark-blue-950
+
#0C1726
+
+
+ +

Green-Success

+ +
+
+
+
dark-green-50
+
#C8F3DE
+
+
+
+
dark-green-100
+
#9BE6C1
+
+
+
+
dark-green-200
+
#78D7A9
+
+
+
+
dark-green-300
+
#58C08E
+
+
+
+
dark-green-400
+
#1DB269
+
+
+
+
dark-green-500
+
#0C9150
+
+
+
+
dark-green-600
+
#077241
+
+
+
+
dark-green-700
+
#035831
+
+
+
+
dark-green-800
+
#0A3F27
+
+
+
+
dark-green-900
+
#0B2E1C
+
+
+
+
dark-green-950
+
#0C2016
+
+
+ +

Red-Error

+ +
+
+
+
dark-red-50
+
#FFDEDE
+
+
+
+
dark-red-100
+
#FFC1C1
+
+
+
+
dark-red-200
+
#FE7C7C
+
+
+
+
dark-red-300
+
#EB4D52
+
+
+
+
dark-red-400
+
#D73232
+
+
+
+
dark-red-500
+
#B01F1F
+
+
+
+
dark-red-600
+
#862020
+
+
+
+
dark-red-700
+
#661717
+
+
+
+
dark-red-800
+
#521515
+
+
+
+
dark-red-900
+
#3C1316
+
+
+
+
dark-red-950
+
#2A0C0C
+
+
+ +

Amber-Warning

+ +
+
+
+
dark-amber-50
+
#FFE59A
+
+
+
+
dark-amber-100
+
#F4C25F
+
+
+
+
dark-amber-200
+
#FFAA3E
+
+
+
+
dark-amber-300
+
#FA961F
+
+
+
+
dark-amber-400
+
#E27E1B
+
+
+
+
dark-amber-500
+
#CB6D10
+
+
+
+
dark-amber-600
+
#975215
+
+
+
+
dark-amber-700
+
#753A07
+
+
+
+
dark-amber-800
+
#4B2606
+
+
+
+
dark-amber-900
+
#371E06
+
+
+
+
dark-amber-950
+
#281808
+
+
+ +

Brand Colors

+ +

Orange

+ +
+
+
+
dark-orange-50
+
#FFCDAD
+
+
+
+
dark-orange-100
+
#FFA873
+
+
+
+
dark-orange-200
+
#FA8A40
+
+
+
+
dark-orange-300
+
#DE6D1B
+
+
+
+
dark-orange-400
+
#C45A0E
+
+
+
+
dark-orange-500
+
#984509
+
+
+
+
dark-orange-600
+
#823906
+
+
+
+
dark-orange-700
+
#683108
+
+
+
+
dark-orange-800
+
#532707
+
+
+
+
dark-orange-900
+
#361C09
+
+
+
+
dark-orange-950
+
#261407
+
+
+ +

Yellow

+ +
+
+
+
dark-yellow-50
+
#FFEEB8
+
+
+
+
dark-yellow-100
+
#FFE386
+
+
+
+
dark-yellow-200
+
#F8D76A
+
+
+
+
dark-yellow-300
+
#ECC02E
+
+
+
+
dark-yellow-400
+
#DAAE15
+
+
+
+
dark-yellow-500
+
#C69C12
+
+
+
+
dark-yellow-600
+
#9C7A0A
+
+
+
+
dark-yellow-700
+
#705606
+
+
+
+
dark-yellow-800
+
#5B4605
+
+
+
+
dark-yellow-900
+
#3F3004
+
+
+
+
dark-yellow-950
+
#322604
+
+
+ +

Teal

+ +
+
+
+
dark-teal-50
+
#A0F7ED
+
+
+
+
dark-teal-100
+
#7EF3E7
+
+
+
+
dark-teal-200
+
#51DECF
+
+
+
+
dark-teal-300
+
#28BCAC
+
+
+
+
dark-teal-400
+
#1C988B
+
+
+
+
dark-teal-500
+
#1B7169
+
+
+
+
dark-teal-600
+
#145B54
+
+
+
+
dark-teal-700
+
#0B4942
+
+
+
+
dark-teal-800
+
#0B3A35
+
+
+
+
dark-teal-900
+
#0A2D29
+
+
+
+
dark-teal-950
+
#0A2D29
+
+
+ +

Cyan

+ +
+
+
+
dark-cyan-50
+
#D0F0FA
+
+
+
+
dark-cyan-100
+
#95E3F6
+
+
+
+
dark-cyan-200
+
#62CAE9
+
+
+
+
dark-cyan-300
+
#3CB8DC
+
+
+
+
dark-cyan-400
+
#1D94B9
+
+
+
+
dark-cyan-500
+
#107B9B
+
+
+
+
dark-cyan-600
+
#14667F
+
+
+
+
dark-cyan-700
+
#104F62
+
+
+
+
dark-cyan-800
+
#0D3B49
+
+
+
+
dark-cyan-900
+
#0C2D37
+
+
+
+
dark-cyan-950
+
#0C242D
+
+
+ +

Purple

+ +
+
+
+
dark-purple-50
+
#E5C6FB
+
+
+
+
dark-purple-100
+
#D9AFF5
+
+
+
+
dark-purple-200
+
#C993EF
+
+
+
+
dark-purple-300
+
#B168E8
+
+
+
+
dark-purple-400
+
#984BD8
+
+
+
+
dark-purple-500
+
#7A2DB9
+
+
+
+
dark-purple-600
+
#622195
+
+
+
+
dark-purple-700
+
#491870
+
+
+
+
dark-purple-800
+
#391457
+
+
+
+
dark-purple-900
+
#270E3B
+
+
+
+
dark-purple-950
+
#1F112A
+
+
+ +

Pink

+ +
+
+
+
dark-pink-50
+
#FFBBE4
+
+
+
+
dark-pink-100
+
#F69AD1
+
+
+
+
dark-pink-200
+
#ED77BE
+
+
+
+
dark-pink-300
+
#E359AB
+
+
+
+
dark-pink-400
+
#CB4394
+
+
+
+
dark-pink-500
+
#AC377D
+
+
+
+
dark-pink-600
+
#892660
+
+
+
+
dark-pink-700
+
#6F1D4D
+
+
+
+
dark-pink-800
+
#5B183F
+
+
+
+
dark-pink-900
+
#42132F
+
+
+
+
dark-pink-950
+
#341126
+
+
+ +

Violet

+ +
+
+
+
dark-violet-50
+
#CDBEFF
+
+
+
+
dark-violet-100
+
#BCA9FC
+
+
+
+
dark-violet-200
+
#9F87ED
+
+
+
+
dark-violet-300
+
#9478F8
+
+
+
+
dark-violet-400
+
#8363F1
+
+
+
+
dark-violet-500
+
#5A3EBA
+
+
+
+
dark-violet-600
+
#403397
+
+
+
+
dark-violet-700
+
#3D3286
+
+
+
+
dark-violet-800
+
#291D64
+
+
+
+
dark-violet-900
+
#1F1841
+
+
+
+
dark-violet-950
+
#17132C
+
+
+ +

Alpha Colors

+ +

Dark Red Alpha

+ +
+
+
+
dark-red-alpha-50
+
#FFDEDE
+
+
+
+
dark-red-alpha-100
+
#FFC1C1
+
+
+
+
dark-red-alpha-200
+
#FE7C7C
+
+
+
+
dark-red-alpha-300
+
#FF5858F0
+
+
+
+
dark-red-alpha-400
+
#D73232
+
+
+
+
dark-red-alpha-500
+
#ED2222BA
+
+
+
+
dark-red-alpha-600
+
#ED2D2D8A
+
+
+
+
dark-red-alpha-700
+
#C120207D
+
+
+
+
dark-red-alpha-800
+
#C01B1B61
+
+
+
+
dark-red-alpha-900
+
#5F16168F
+
+
+
+
dark-red-alpha-950
+
#53060666
+
+
+ diff --git a/packages/frappe-ui-react/src/components/themeShowCase/color-pallete-light.mdx b/packages/frappe-ui-react/src/components/themeShowCase/color-pallete-light.mdx new file mode 100644 index 00000000..e4fc1dba --- /dev/null +++ b/packages/frappe-ui-react/src/components/themeShowCase/color-pallete-light.mdx @@ -0,0 +1,804 @@ +import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks'; + + + +export const containerStyle = { display: "flex", gap: "20px", flexWrap:"wrap" }; +export const swatchBox = { width: "90px", height: "90px", border:"1px solid", borderRadius: "8px"}; +export const labelStyle = { marginTop: "10px", fontSize: "14px", fontWeight: "600" }; +export const hexStyle = { fontSize: "12px", color: "#666" }; + +# Colour palette - Light mode + +## Primary color + +### Neutral + +
+
+
+
white
+
#FFF
+
+
+
+
black
+
#000
+
+
+ +### Gray + +
+
+
+
gray-50
+
#F8F8F8
+
+
+
+
gray-100
+
#F3F3F3
+
+
+
+
gray-200
+
#EDEDED
+
+
+
+
gray-300
+
#E2E2E2
+
+
+
+
gray-400
+
#C7C7C7
+
+
+
+
gray-500
+
#999999
+
+
+
+
gray-600
+
#7C7C7C
+
+
+
+
gray-700
+
#525252
+
+
+
+
gray-800
+
#383838
+
+
+
+
gray-900
+
#171717
+
+
+ +## Functional UI + +### Blue-Information + +
+
+
+
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
+
+
+ +### Green-Success + +
+
+
+
green-50
+
#F2FDF4
+
+
+
+
green-100
+
#E4FAEB
+
+
+
+
green-200
+
#C3F9D3
+
+
+
+
green-300
+
#A6EFC0
+
+
+
+
green-400
+
#78E09F
+
+
+
+
green-500
+
#46B37E
+
+
+
+
green-600
+
#278F5E
+
+
+
+
green-700
+
#137949
+
+
+
+
green-800
+
#075E35
+
+
+
+
green-900
+
#173B2C
+
+
+ +### Red-Error + +
+
+
+
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
+
+
+ +### Amber-Warning + +
+
+
+
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
+
+
+ +## Brand Colors + +### Orange + +
+
+
+
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
+
+
+ +### Yellow + +
+
+
+
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
+
+
+ +### Teal + +
+
+
+
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
+
+
+ +### Cyan + +
+
+
+
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
+
+
+ +### Purple + +
+
+
+
purple-50
+
#FDFAFF
+
+
+
+
purple-100
+
#F6E9FF
+
+
+
+
purple-200
+
#ECD3FF
+
+
+
+
purple-300
+
#E2B9FC
+
+
+
+
purple-400
+
#BF78FA
+
+
+
+
purple-500
+
#9C45E3
+
+
+
+
purple-600
+
#8642C2
+
+
+
+
purple-700
+
#6E399D
+
+
+
+
purple-800
+
#5C2F83
+
+
+
+
purple-900
+
#401863
+
+
+ +### Pink + +
+
+
+
pink-50
+
#FFF7FC
+
+
+
+
pink-100
+
#FDE8F5
+
+
+
+
pink-200
+
#FFD5F0
+
+
+
+
pink-300
+
#F9B9E0
+
+
+
+
pink-400
+
#F77CC6
+
+
+
+
pink-500
+
#E34AA6
+
+
+
+
pink-600
+
#CF3A96
+
+
+
+
pink-700
+
#9C2671
+
+
+
+
pink-800
+
#801458
+
+
+
+
pink-900
+
#570F3E
+
+
+ +### Violet + +
+
+
+
violet-50
+
#FBFAFF
+
+
+
+
violet-100
+
#EEE8FF
+
+
+
+
violet-200
+
#DBD5FF
+
+
+
+
violet-300
+
#C9BAFB
+
+
+
+
violet-400
+
#A68EFE
+
+
+
+
violet-500
+
#7757EE
+
+
+
+
violet-600
+
#664ECC
+
+
+
+
violet-700
+
#4F3DA1
+
+
+
+
violet-800
+
#392980
+
+
+
+
violet-900
+
#251959
+
+
+ +## Overlay colors + +### White Overlay + +
+
+
+
white-overlay-50
+
#FFFFFF1A
+
+
+
+
white-overlay-100
+
#FFFFFF2E
+
+
+
+
white-overlay-200
+
#FFFFFF45
+
+
+
+
white-overlay-300
+
#FFFFFF5C
+
+
+
+
white-overlay-400
+
#FFFFFF73
+
+
+
+
white-overlay-500
+
#FFFFFF8A
+
+
+
+
white-overlay-600
+
#FFFFFFA1
+
+
+
+
white-overlay-700
+
#FFFFFFB8
+
+
+
+
white-overlay-800
+
#FFFFFFCF
+
+
+
+
white-overlay-900
+
#FFFFFFE5
+
+
+ +### Black Overlay + +
+
+
+
black-overlay-50
+
#00000017
+
+
+
+
black-overlay-100
+
#0000002E
+
+
+
+
black-overlay-200
+
#00000045
+
+
+
+
black-overlay-300
+
#0000005C
+
+
+
+
black-overlay-400
+
#00000073
+
+
+
+
black-overlay-500
+
#0000008A
+
+
+
+
black-overlay-600
+
#000000A1
+
+
+
+
black-overlay-700
+
#000000B8
+
+
+
+
black-overlay-800
+
#000000CF
+
+
+
+
black-overlay-900
+
#000000E5
+
+
+ diff --git a/packages/frappe-ui-react/src/components/themeShowCase/color-styles.stories.tsx b/packages/frappe-ui-react/src/components/themeShowCase/color-styles.stories.tsx new file mode 100644 index 00000000..85f16c1c --- /dev/null +++ b/packages/frappe-ui-react/src/components/themeShowCase/color-styles.stories.tsx @@ -0,0 +1,215 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; + +const outlineColors = [ + "border-outline-white", + "border-outline-gray-1", + "border-outline-gray-2", + "border-outline-gray-3", + "border-outline-gray-4", + "border-outline-gray-5", + "border-outline-red-2", + "border-outline-red-3", + "border-outline-red-4", + "border-outline-green-2", + "border-outline-green-3", + "border-outline-green-4", + "border-outline-amber-2", + "border-outline-amber-3", + "border-outline-amber-4", + "border-outline-blue-2", + "border-outline-blue-3", + "border-outline-blue-4", + "border-outline-orange-3", + "border-outline-violet-2", + "border-outline-violet-3", + "border-outline-violet-4", + "border-outline-gray-modal", +]; + +const inkColors = [ + "text-ink-white", + "text-ink-gray-1", + "text-ink-gray-2", + "text-ink-gray-3", + "text-ink-gray-4", + "text-ink-gray-5", + "text-ink-gray-6", + "text-ink-gray-7", + "text-ink-gray-8", + "text-ink-red-1", + "text-ink-red-2", + "text-ink-red-3", + "text-ink-red-4", + "text-ink-green-1", + "text-ink-green-2", + "text-ink-green-3", + "text-ink-green-4", + "text-ink-amber-1", + "text-ink-amber-2", + "text-ink-amber-3", + "text-ink-amber-4", + "text-ink-blue-1", + "text-ink-blue-2", + "text-ink-blue-3", + "text-ink-blue-4", + "text-ink-blue-link", +]; + +const surfaceColors = [ + "bg-surface-white", + "bg-surface-gray-1", + "bg-surface-gray-2", + "bg-surface-gray-3", + "bg-surface-gray-4", + "bg-surface-gray-5", + "bg-surface-gray-6", + "bg-surface-gray-7", + "bg-surface-red-1", + "bg-surface-red-2", + "bg-surface-red-3", + "bg-surface-red-4", + "bg-surface-red-5", + "bg-surface-red-6", + "bg-surface-red-7", + "bg-surface-green-1", + "bg-surface-green-2", + "bg-surface-green-3", + "bg-surface-green-4", + "bg-surface-green-5", + "bg-surface-green-6", + "bg-surface-green-7", + "bg-surface-amber-1", + "bg-surface-amber-2", + "bg-surface-amber-3", + "bg-surface-amber-4", + "bg-surface-amber-5", + "bg-surface-amber-6", + "bg-surface-amber-7", + "bg-surface-blue-1", + "bg-surface-blue-2", + "bg-surface-blue-3", + "bg-surface-blue-4", + "bg-surface-blue-5", + "bg-surface-blue-6", + "bg-surface-blue-7", + "bg-surface-orange-2", + "bg-surface-violet-2", + "bg-surface-violet-3", + "bg-surface-violet-4", + "bg-surface-violet-5", + "bg-surface-violet-6", + "bg-surface-violet-7", + "bg-surface-cyan-2", + "bg-surface-menu-bar", + "bg-surface-card", + "bg-surface-modal", + "bg-surface-selected", +]; + +const focusColors = [ + "border-focus-gray", + "border-focus-blue", + "border-focus-green", + "border-focus-red", + "border-focus-amber", +]; + +const OutlineColors = () => { + return ( +
+

Outlines

+
+ {outlineColors.map((className) => ( +
+
{className}
+
+ ))} +
+
+ ); +}; + +const InkColors = () => { + return ( +
+

Ink Colors

+
+ {inkColors.map((className) => ( +
+
{className}
+
+ ))} +
+
+ ); +}; + +const SurfaceColors = () => { + return ( +
+

Surface Colors

+
+ {surfaceColors.map((className) => ( +
+
{className}
+
+ ))} +
+
+ ); +}; + +const FocusColors = () => { + return ( +
+

Focus Colors

+
+ {focusColors.map((className) => ( +
+
{className}
+
+ ))} +
+
+ ); +}; + +const ColorStyles = () => { + return ( +
+

Color Styles

+ + + + +
+ ); +}; + +const meta: Meta = { + title: "DesignSystem/Color Styles", + component: ColorStyles, + parameters: { + layout: "fullscreen", + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: () => , +}; diff --git a/packages/frappe-ui-react/src/components/timesheet/rows.mdx b/packages/frappe-ui-react/src/components/timesheet/rows.mdx index 4e88be7a..a81e1e09 100644 --- a/packages/frappe-ui-react/src/components/timesheet/rows.mdx +++ b/packages/frappe-ui-react/src/components/timesheet/rows.mdx @@ -1,17 +1,14 @@ -import { Canvas, Meta } from "@storybook/addon-docs/blocks"; - -import * as rowHeaderStories from "./rows/rowHeader.stories"; -import * as rowWeekStories from "./rows/rowWeek.stories"; - - +import { Canvas, Meta } from '@storybook/addon-docs/blocks'; + +import * as rowHeaderStories from './rows/rowHeader.stories'; + + # Header Row - + # Row Week - - diff --git a/packages/frappe-ui-react/src/theme.css b/packages/frappe-ui-react/src/theme.css index 05ad3c20..4838615a 100644 --- a/packages/frappe-ui-react/src/theme.css +++ b/packages/frappe-ui-react/src/theme.css @@ -7,7 +7,6 @@ @custom-variant dark (&:is(.dark *)); - html, body, button, @@ -24,8 +23,7 @@ input { @apply cursor-pointer hover:cursor-pointer; } -@layer base { - :root { +@theme { /* Base Colors */ --color-inherit: inherit; --color-transparent: transparent; @@ -61,7 +59,7 @@ input { --color-green-100: #e4faeb; --color-green-200: #c3f9d3; --color-green-300: #a6efc0; - --color-green-400: #86e0a8; + --color-green-400: #78E09F; --color-green-500: #46b37e; --color-green-600: #278f5e; --color-green-700: #137949; @@ -118,12 +116,12 @@ input { /* Violet Scale */ --color-violet-50: #fbfaff; - --color-violet-100: #f0ebff; + --color-violet-100: #eee8ff; --color-violet-200: #dbd5ff; --color-violet-300: #c9bafb; - --color-violet-400: #b3a1f5; - --color-violet-500: #6846e3; - --color-violet-600: #5f46c7; + --color-violet-400: #a68efe; + --color-violet-500: #7757EE; + --color-violet-600: #664ECC; --color-violet-700: #4f3da1; --color-violet-800: #392980; --color-violet-900: #251959; @@ -157,7 +155,7 @@ input { --color-pink-100: #fde8f5; --color-pink-200: #ffd5f0; --color-pink-300: #f9b9e0; - --color-pink-400: #f6a7d6; + --color-pink-400: #f77cc6; --color-pink-500: #e34aa6; --color-pink-600: #cf3a96; --color-pink-700: #9c2671; @@ -169,7 +167,7 @@ input { --color-purple-100: #f6e9ff; --color-purple-200: #ecd3ff; --color-purple-300: #e2b9fc; - --color-purple-400: #cfa1f2; + --color-purple-400: #bf78fa; --color-purple-500: #9c45e3; --color-purple-600: #8642c2; --color-purple-700: #6e399d; @@ -186,7 +184,7 @@ input { --color-white-overlay-600: #ffffffa1; --color-white-overlay-700: #ffffffb8; --color-white-overlay-800: #ffffffcf; - --color-white-overlay-900: #ffffffe6; + --color-white-overlay-900: #ffffffe5; /* Black Overlay Scale */ --color-black-overlay-50: #00000017; @@ -198,21 +196,21 @@ input { --color-black-overlay-600: #000000a1; --color-black-overlay-700: #000000b8; --color-black-overlay-800: #000000cf; - --color-black-overlay-900: #000000e6; + --color-black-overlay-900: #000000e5; /* Dark Gray Scale */ --color-dark-gray-50: #f8f8f8; - --color-dark-gray-100: #d4d4d4; + --color-dark-gray-100: #D9D9D9; --color-dark-gray-200: #afafaf; - --color-dark-gray-250: #999999; --color-dark-gray-300: #808080; --color-dark-gray-400: #717171; + --color-dark-gray-450: #575757; --color-dark-gray-500: #424242; --color-dark-gray-600: #343434; - --color-dark-gray-650: #2b2b2b; - --color-dark-gray-700: #232323; - --color-dark-gray-800: #1c1c1c; - --color-dark-gray-900: #0f0f0f; + --color-dark-gray-700: #2b2b2b; + --color-dark-gray-800: #232323; + --color-dark-gray-900: #1c1c1c; + --color-dark-gray-950: #0F0F0F; /* Dark Blue Scale */ --color-dark-blue-50: #c9e0f5; @@ -225,45 +223,47 @@ input { --color-dark-blue-700: #063d71; --color-dark-blue-800: #052b53; --color-dark-blue-900: #0e2037; - --color-dark-blue-900-80: #0e2037cc; + --color-dark-blue-950: #0C1726; /* Dark Green Scale */ --color-dark-green-50: #c8f3de; --color-dark-green-100: #9be6c1; --color-dark-green-200: #78d7a9; --color-dark-green-300: #58c08e; - --color-dark-green-400: #1ba964; - --color-dark-green-500: #0a9752; - --color-dark-green-600: #0f814a; + --color-dark-green-400: #1DB269; + --color-dark-green-500: #0C9150; + --color-dark-green-600: #077241; --color-dark-green-700: #035831; --color-dark-green-800: #0a3f27; --color-dark-green-900: #0b2e1c; + --color-dark-green-950: #0C2016; /* Dark Red Scale */ - --color-dark-red-50: #ffc1c1; - --color-dark-red-100: #ff9595; - --color-dark-red-200: #fc7474; + --color-dark-red-50: #FFDEDE; + --color-dark-red-100: #FFC1C1; + --color-dark-red-200: #FE7C7C; --color-dark-red-300: #eb4d52; - --color-dark-red-400: #e43838; - --color-dark-red-500: #c12020; - --color-dark-red-600: #901818; - --color-dark-red-700: #681916; + --color-dark-red-400: #D73232; + --color-dark-red-500: #B01F1F; + --color-dark-red-600: #862020; + --color-dark-red-700: #661717; --color-dark-red-800: #521515; - --color-dark-red-900: #361515; - --color-dark-red-800-90: #521515e6; - --color-dark-red-900-90: #361515e6; + --color-dark-red-900: #3C1316; + --color-dark-red-950: #2A0C0C; + /* Dark Amber Scale */ - --color-dark-amber-50: #f9e8a5; - --color-dark-amber-100: #f8d16e; - --color-dark-amber-200: #f0ba31; - --color-dark-amber-300: #e79913; - --color-dark-amber-400: #e37d00; + --color-dark-amber-50: #FFE59A; + --color-dark-amber-100: #F4C25F; + --color-dark-amber-200: #FFAA3E; + --color-dark-amber-300: #FA961F; + --color-dark-amber-400: #E27E1B; --color-dark-amber-500: #cb6d10; - --color-dark-amber-600: #824108; - --color-dark-amber-700: #603007; - --color-dark-amber-800: #4b2606; + --color-dark-amber-600: #975215; + --color-dark-amber-700: #753A07; + --color-dark-amber-800: #4B2606; --color-dark-amber-900: #371e06; + --color-dark-amber-950: #281808; /* Dark Orange Scale */ --color-dark-orange-50: #ffcdad; @@ -275,44 +275,47 @@ input { --color-dark-orange-600: #823906; --color-dark-orange-700: #683108; --color-dark-orange-800: #532707; - --color-dark-orange-900: #401f07; - --color-dark-orange-900-80: #401f07cc; + --color-dark-orange-900: #361C09; + --color-dark-orange-950: #261407; /* Dark Yellow Scale */ - --color-dark-yellow-50: #ffe89d; - --color-dark-yellow-100: #f8d76a; - --color-dark-yellow-200: #ecc02e; - --color-dark-yellow-300: #daae15; - --color-dark-yellow-400: #c69c12; - --color-dark-yellow-500: #9c7a0a; - --color-dark-yellow-600: #705606; - --color-dark-yellow-700: #5b4605; - --color-dark-yellow-800: #3f3004; - --color-dark-yellow-900: #322604; + --color-dark-yellow-50: #FFEEB8; + --color-dark-yellow-100: #FFE386; + --color-dark-yellow-200: #F8D76A; + --color-dark-yellow-300: #ECC02E; + --color-dark-yellow-400: #DAAE15; + --color-dark-yellow-500: #C69C12; + --color-dark-yellow-600: #9C7A0A; + --color-dark-yellow-700: #705606; + --color-dark-yellow-800: #5B4605; + --color-dark-yellow-900: #3F3004; + --color-dark-yellow-950: #322604; /* Dark Teal Scale */ - --color-dark-teal-50: #93f2e8; - --color-dark-teal-100: #6ee7db; - --color-dark-teal-200: #52dacc; - --color-dark-teal-300: #3dc6b8; - --color-dark-teal-400: #219c8f; + --color-dark-teal-50: #A0F7ED; + --color-dark-teal-100: #7EF3E7; + --color-dark-teal-200: #51DECF; + --color-dark-teal-300: #28BCAC; + --color-dark-teal-400: #1C988B; --color-dark-teal-500: #1b7169; - --color-dark-teal-600: #13564f; - --color-dark-teal-700: #0c423c; + --color-dark-teal-600: #145B54; + --color-dark-teal-700: #0B4942; --color-dark-teal-800: #0b3a35; --color-dark-teal-900: #0a2d29; + --color-dark-teal-950: #0A2D29; /* Dark Cyan Scale */ --color-dark-cyan-50: #d0f0fa; - --color-dark-cyan-100: #a0e6f7; - --color-dark-cyan-200: #68d3f3; + --color-dark-cyan-100: #95E3F6; + --color-dark-cyan-200: #62CAE9; --color-dark-cyan-300: #3cb8dc; - --color-dark-cyan-400: #2b8dab; - --color-dark-cyan-500: #23728b; - --color-dark-cyan-600: #155266; - --color-dark-cyan-700: #0e3b49; - --color-dark-cyan-800: #0d2b36; - --color-dark-cyan-900: #0b252d; + --color-dark-cyan-400: #1D94B9; + --color-dark-cyan-500: #107B9B; + --color-dark-cyan-600: #14667F; + --color-dark-cyan-700: #104F62; + --color-dark-cyan-800: #0D3B49; + --color-dark-cyan-900: #0C2D37; + --color-dark-cyan-950: #0C242D; /* Dark Purple Scale */ --color-dark-purple-50: #e5c6fb; @@ -321,36 +324,54 @@ input { --color-dark-purple-300: #b168e8; --color-dark-purple-400: #984bd8; --color-dark-purple-500: #7a2db9; - --color-dark-purple-600: #591f89; - --color-dark-purple-700: #47176e; + --color-dark-purple-600: #622195; + --color-dark-purple-700: #491870; --color-dark-purple-800: #391457; - --color-dark-purple-900: #2e1146; + --color-dark-purple-900: #270E3B; + --color-dark-purple-950: #1F112A; /* Dark Pink Scale */ - --color-dark-pink-50: #f6c5de; + --color-dark-pink-50: #FFBBE4; --color-dark-pink-100: #f69ad1; --color-dark-pink-200: #ed77be; --color-dark-pink-300: #e359ab; --color-dark-pink-400: #cb4394; --color-dark-pink-500: #ac377d; - --color-dark-pink-600: #822a5f; - --color-dark-pink-700: #68204b; - --color-dark-pink-800: #601d46; - --color-dark-pink-900: #471432; - --color-dark-pink-900-80: #471432cc; + --color-dark-pink-600: #892660; + --color-dark-pink-700: #6F1D4D; + --color-dark-pink-800: #5B183F; + --color-dark-pink-900: #42132F; + --color-dark-pink-950: #341126; /* Dark Violet Scale */ - --color-dark-violet-50: #dacbf7; - --color-dark-violet-100: #c4afee; - --color-dark-violet-200: #b398ef; - --color-dark-violet-300: #9d7cea; - --color-dark-violet-400: #8867e8; - --color-dark-violet-500: #5c3fc2; - --color-dark-violet-600: #4639a6; - --color-dark-violet-700: #332978; - --color-dark-violet-800: #281e5d; - --color-dark-violet-900: #221c42; + --color-dark-violet-50: #CDBEFF; + --color-dark-violet-100: #BCA9FC; + --color-dark-violet-200: #9F87ED; + --color-dark-violet-300: #9478F8; + --color-dark-violet-400: #8363F1; + --color-dark-violet-500: #5A3EBA; + --color-dark-violet-600: #403397; + --color-dark-violet-700: #3D3286; + --color-dark-violet-800: #291D64; + --color-dark-violet-900: #1F1841; + --color-dark-violet-950: #17132C; + + /* Dark alpha colors */ + --color-dark-red-alpha-50: #FFDEDE; + --color-dark-red-alpha-100: #FFC1C1; + --color-dark-red-alpha-200: #FE7C7C; + --color-dark-red-alpha-300: #FF5858F0; + --color-dark-red-alpha-400: #D73232; + --color-dark-red-alpha-500: #ED2222BA; + --color-dark-red-alpha-600: #ED2D2D8A; + --color-dark-red-alpha-700: #C120207D; + --color-dark-red-alpha-800: #C01B1B61; + --color-dark-red-alpha-900: #5F16168F; + --color-dark-red-alpha-950: #53060666; +} +@layer base { + :root { /* Semantic Colors */ /* Ink Colors (Text) */ --color-ink-white: var(--color-white); @@ -360,69 +381,140 @@ input { --color-ink-gray-4: var(--color-gray-500); --color-ink-gray-5: var(--color-gray-600); --color-ink-gray-6: var(--color-gray-700); - --color-ink-gray-7: var(--color-gray-700); - --color-ink-gray-8: var(--color-gray-800); - --color-ink-gray-9: var(--color-gray-900); + --color-ink-gray-7: var(--color-gray-800); + --color-ink-gray-8: var(--color-gray-900); --color-ink-red-1: var(--color-red-50); --color-ink-red-2: var(--color-red-400); --color-ink-red-3: var(--color-red-500); - --color-ink-red-4: var(--color-red-600); + --color-ink-red-4: var(--color-red-700); --color-ink-green-1: var(--color-green-50); - --color-ink-green-2: var(--color-green-500); - --color-ink-green-3: var(--color-green-600); + --color-ink-green-2: var(--color-green-400); + --color-ink-green-3: var(--color-green-500); + --color-ink-green-4: var(--color-green-700); --color-ink-amber-1: var(--color-amber-50); - --color-ink-amber-2: var(--color-amber-500); - --color-ink-amber-3: var(--color-amber-600); + --color-ink-amber-2: var(--color-amber-400); + --color-ink-amber-3: var(--color-amber-500); + --color-ink-amber-4: var(--color-amber-700); --color-ink-blue-1: var(--color-blue-50); - --color-ink-blue-2: var(--color-blue-500); - --color-ink-blue-3: var(--color-blue-600); - --color-ink-cyan-1: var(--color-cyan-500); - --color-ink-pink-1: var(--color-pink-500); - --color-ink-violet-1: var(--color-violet-500); + --color-ink-blue-2: var(--color-blue-400); + --color-ink-blue-3: var(--color-blue-500); + --color-ink-blue-4: var(--color-blue-700); + --color-ink-vilot-1: var(--color-violet-50); + --color-ink-vilot-2: var(--color-violet-400); + --color-ink-vilot-3: var(--color-violet-500); + --color-ink-vilot-4: var(--color-violet-700); --color-ink-blue-link: var(--color-blue-400); + --color-ink-alert-button-default: var(--color-gray-900); + --color-ink-alert-button-info: var(--color-gray-900); + --color-ink-alert-button-success: var(--color-gray-900); + --color-ink-alert-button-warning: var(--color-gray-900); + --color-ink-alert-button-error: var(--color-gray-900); + + /* Dark Ink Colors (Text) */ + --color-dark-ink-white: var(--color-dark-gray-950); + --color-dark-ink-gray-1: var(--color-dark-gray-800); + --color-dark-ink-gray-2: var(--color-dark-gray-500); + --color-dark-ink-gray-3: var(--color-dark-gray-450); + --color-dark-ink-gray-4: var(--color-dark-gray-400); + --color-dark-ink-gray-5: var(--color-dark-gray-300); + --color-dark-ink-gray-6: var(--color-dark-gray-200); + --color-dark-ink-gray-7: var(--color-dark-gray-100); + --color-dark-ink-gray-8: var(--color-dark-gray-50); + --color-dak-ink-red-1: var(--color-dark-white); + --color-dark-ink-red-2: var(--color-dark-red-700); + --color-dark-ink-red-3: var(--color-dark-red-400); + --color-dark-ink-red-4: var(--color-dark-red-300); + --color-dark-ink-green-1: var(--color-white); + --color-dark-ink-green-2: var(--color-dark-green-700); + --color-dark-ink-green-3: var(--color-dark-green-400); + --color-dark-ink-green-4: var(--color-dark-green-300); + --color-dark-ink-amber-1: var(--color-dark-white); + --color-dark-ink-amber-2: var(--color-dark-amber-700); + --color-dark-ink-amber-3: var(--color-dark-amber-400); + --color-dark-ink-amber-4: var(--color-dark-amber-300); + --color-dark-ink-blue-1: var(--color-white); + --color-dark-ink-blue-2: var(--color-dark-blue-700); + --color-dark-ink-blue-3: var(--color-dark-blue-400); + --color-dark-ink-blue-4: var(--color-dark-blue-300); + --color-dark-ink-vilot-1: var(--color-white); + --color-dark-ink-vilot-2: var(--color-dark-violet-700); + --color-dark-ink-vilot-3: var(--color-dark-violet-400); + --color-dark-ink-vilot-4: var(--color-dark-violet-300); + --color-dark-ink-blue-link: var(--color-dark-blue-500); + --color-dark-ink-alert-button-default: var(--color-dark-gray-200); + --color-dark-ink-alert-button-info: var(--color-dark-blue-200); + --color-dark-ink-alert-button-success: var(--color-dark-green-200); + --color-dark-ink-alert-button-warning: var(--color-dark-amber-200); + --color-dark-ink-alert-button-error: var(--color-dark-red-200); /* Surface Colors (Backgrounds) */ - --color-surface-white: var(--color-white); - --color-surface-gray-1: var(--color-gray-50); - --color-surface-gray-2: var(--color-gray-100); - --color-surface-gray-3: var(--color-gray-200); - --color-surface-gray-4: var(--color-gray-300); - --color-surface-gray-5: var(--color-gray-700); - --color-surface-gray-6: var(--color-gray-800); - --color-surface-gray-7: var(--color-gray-900); - --color-surface-red-1: var(--color-red-50); - --color-surface-red-2: var(--color-red-100); - --color-surface-red-3: var(--color-red-200); - --color-surface-red-4: var(--color-red-300); - --color-surface-red-5: var(--color-red-600); - --color-surface-red-6: var(--color-red-700); - --color-surface-red-7: var(--color-red-800); - --color-surface-green-1: var(--color-green-50); - --color-surface-green-2: var(--color-green-100); - --color-surface-green-3: var(--color-green-600); - --color-surface-amber-1: var(--color-amber-50); - --color-surface-amber-2: var(--color-amber-100); - --color-surface-amber-3: var(--color-amber-600); - --color-surface-blue-1: var(--color-blue-50); - --color-surface-blue-2: var(--color-blue-100); - --color-surface-blue-3: var(--color-blue-600); - --color-surface-orange-1: var(--color-orange-100); - --color-surface-orange-2: var(--color-orange-600); - --color-surface-violet-1: var(--color-violet-100); - --color-surface-violet-2: var(--color-violet-600); - --color-surface-purple-1: var(--color-purple-100); - --color-surface-purple-2: var(--color-purple-600); - --color-surface-yellow-1: var(--color-yellow-100); - --color-surface-teal-1: var(--color-teal-100); - --color-surface-teal-2: var(--color-teal-600); - --color-surface-cyan-1: var(--color-cyan-100); - --color-surface-cyan-2: var(--color-cyan-600); - --color-surface-pink-1: var(--color-pink-100); - --color-surface-pink-2: var(--color-pink-600); - --color-surface-menu-bar: var(--color-gray-50); - --color-surface-cards: var(--color-white); - --color-surface-modal: var(--color-white); - --color-surface-selected: var(--color-white); + --color-surface-white: var(--color-dark-gray-950); + --color-surface-gray-1: var(--color-dark-gray-800); + --color-surface-gray-2: var(--color-dark-gray-700); + --color-surface-gray-3: var(--color-dark-gray-600); + --color-surface-gray-4: var(--color-dark-gray-500); + --color-surface-gray-5: var(--color-dark-gray-200); + --color-surface-gray-6: var(--color-dark-gray-100); + --color-surface-gray-7: var(--color-dark-gray-50); + --color-surface-red-1: var(--color-dark-red-950); + --color-surface-red-2: var(--color-dark-red-900); + --color-surface-red-3: var(--color-dark-red-800); + --color-surface-red-4: var(--color-dark-red-700); + --color-surface-red-5: var(--color-dark-red-500); + --color-surface-red-6: var(--color-dark-red-400); + --color-surface-red-7: var(--color-dark-red-600); + --color-surface-green-1: var(--color-dark-green-950); + --color-surface-green-2: var(--color-dark-green-900); + --color-surface-green-3: var(--color-dark-green-800); + --color-surface-green-4: var(--color-dark-green-700); + --color-surface-green-5: var(--color-dark-green-500); + --color-surface-green-6: var(--color-dark-green-400); + --color-surface-green-7: var(--color-dark-green-600); + --color-surface-amber-1: var(--color-dark-amber-950); + --color-surface-amber-2: var(--color-dark-amber-900); + --color-surface-amber-3: var(--color-dark-amber-800); + --color-surface-amber-4: var(--color-dark-amber-700); + --color-surface-amber-5: var(--color-dark-amber-500); + --color-surface-amber-6: var(--color-dark-amber-400); + --color-surface-amber-7: var(--color-dark-amber-600); + --color-surface-blue-1: var(--color-dark-blue-950); + --color-surface-blue-2: var(--color-dark-blue-900); + --color-surface-blue-3: var(--color-dark-blue-800); + --color-surface-blue-4: var(--color-dark-blue-700); + --color-surface-blue-5: var(--color-dark-blue-500); + --color-surface-blue-6: var(--color-dark-blue-400); + --color-surface-blue-7: var(--color-dark-blue-600); + --color-surface-orange-2: var(--color-dark-orange-900); + --color-surface-violet-2: var(--color-dark-violet-900); + --color-surface-violet-3: var(--color-dark-violet-800); + --color-surface-violet-4: var(--color-dark-violet-700); + --color-surface-violet-5: var(--color-dark-violet-500); + --color-surface-violet-6: var(--color-dark-violet-400); + --color-surface-violet-7: var(--color-dark-violet-600); + --color-surface-cyan-2: var(--color-dark-cyan-900); + --color-surface-menu-bar: var(--color-dark-gray-950); + --color-surface-card: var(--color-dark-gray-900); + --color-surface-modal: var(--color-dark-gray-600); + --color-surface-selected: var(--color-gray-600); + --color-surface-alert-button-default: var(--color-dark-gray-500); + --color-surface-alert-button-info: var(--color-dark-blue-500); + --color-surface-alert-button-success: var(--color-dark-green-500); + --color-surface-alert-button-warning: var(--color-dark-amber-500); + --color-surface-alert-button-error: var(--color-dark-red-500); + + /* Focused State */ + --color-focus-gray: #C9C9C9E5; + --color-focus-blue: #65B9FCE5; + --color-focus-green: #5ED29CE5; + --color-focus-red: #FA9C9DE5; + --color-focus-amber: #FFDA7CE5; + + /* Dark Focused State */ + --color-dark-focus-gray: #464646CC; + --color-dark-focus-blue: #0E3D62CC; + --color-dark-focus-green: #1D563BCC; + --color-dark-focus-red: #751819CC; + --color-dark-focus-amber: #744811CC; /* Outline Colors (Borders) */ --color-outline-white: var(--color-white); @@ -431,16 +523,48 @@ input { --color-outline-gray-3: var(--color-gray-400); --color-outline-gray-4: var(--color-gray-500); --color-outline-gray-5: var(--color-gray-800); - --color-outline-red-1: var(--color-red-300); - --color-outline-red-2: var(--color-red-400); - --color-outline-red-3: var(--color-red-500); - --color-outline-green-1: var(--color-green-300); - --color-outline-green-2: var(--color-green-400); - --color-outline-amber-1: var(--color-amber-300); - --color-outline-amber-2: var(--color-amber-400); - --color-outline-blue-1: var(--color-blue-300); - --color-outline-orange-1: var(--color-orange-400); - --color-outline-gray-modals: var(--color-gray-200); + --color-outline-red-2: var(--color-red-300); + --color-outline-red-3: var(--color-red-400); + --color-outline-red-4: var(--color-red-500); + --color-outline-green-2: var(--color-green-300); + --color-outline-green-3: var(--color-green-400); + --color-outline-green-4: var(--color-green-500); + --color-outline-amber-2: var(--color-amber-300); + --color-outline-amber-3: var(--color-amber-400); + --color-outline-amber-4: var(--color-amber-500); + --color-outline-blue-2: var(--color-blue-300); + --color-outline-blue-3: var(--color-blue-400); + --color-outline-blue-4: var(--color-blue-500); + --color-outline-orange-3: var(--color-orange-400); + --color-outline-violet-2: var(--color-violet-300); + --color-outline-violet-3: var(--color-violet-400); + --color-outline-violet-4: var(--color-violet-500); + --color-outline-gray-modal: var(--color-gray-200); + + /* Dark Outline Colors (Borders) */ + --color-dark-outline-white: var(--color-dark-gray-950); + --color-dark-outline-gray-1: var(--color-dark-gray-800); + --color-dark-outline-gray-2: var(--color-dark-gray-600); + --color-dark-outline-gray-3: var(--color-dark-gray-500); + --color-dark-outline-gray-4: var(--color-dark-gray-450); + --color-dark-outline-gray-5: var(--color-dark-gray-200); + --color-dark-outline-red-2: var(--color-dark-red-800); + --color-dark-outline-red-3: var(--color-dark-red-700); + --color-dark-outline-red-4: var(--color-dark-red-600); + --color-dark-outline-green-2: var(--color-dark-green-800); + --color-dark-outline-green-3: var(--color-dark-green-700); + --color-dark-outline-green-4: var(--color-dark-green-600); + --color-dark-outline-amber-2: var(--color-dark-amber-800); + --color-dark-outline-amber-3: var(--color-dark-amber-700); + --color-dark-outline-amber-4: var(--color-dark-amber-600); + --color-dark-outline-blue-2: var(--color-dark-blue-800); + --color-dark-outline-blue-3: var(--color-dark-blue-700); + --color-dark-outline-blue-4: var(--color-dark-blue-600); + --color-dark-outline-orange-3: var(--color-dark-orange-700); + --color-dark-outline-violet-2: var(--color-dark-violet-800); + --color-dark-outline-violet-3: var(--color-dark-violet-700); + --color-dark-outline-violet-4: var(--color-dark-violet-600); + --color-dark-outline-gray-modal: var(--color-dark-gray-600); /* Border Radius */ --radius-none: 0px; @@ -621,107 +745,102 @@ input { .dark { color-scheme: dark; - /* Override colors for dark theme */ - --color-gray-50: var(--color-dark-gray-900); - --color-gray-100: var(--color-dark-gray-800); - --color-gray-200: var(--color-dark-gray-700); - --color-gray-300: var(--color-dark-gray-650); - --color-gray-400: var(--color-dark-gray-600); - --color-gray-500: var(--color-dark-gray-500); - --color-gray-600: var(--color-dark-gray-400); - --color-gray-700: var(--color-dark-gray-300); - --color-gray-800: var(--color-dark-gray-200); - --color-gray-900: var(--color-dark-gray-100); - /* Override semantic colors for dark theme */ - --color-ink-white: var(--color-dark-gray-900); - --color-ink-gray-1: var(--color-dark-gray-700); - --color-ink-gray-2: var(--color-dark-gray-500); - --color-ink-gray-3: var(--color-dark-gray-400); - --color-ink-gray-4: var(--color-dark-gray-400); - --color-ink-gray-5: var(--color-dark-gray-300); - --color-ink-gray-6: var(--color-dark-gray-250); - --color-ink-gray-7: var(--color-dark-gray-200); - --color-ink-gray-8: var(--color-dark-gray-100); - --color-ink-gray-9: var(--color-dark-gray-50); - --color-ink-red-1: var(--color-dark-red-50); - --color-ink-red-2: var(--color-dark-red-100); - --color-ink-red-3: var(--color-dark-red-200); - --color-ink-red-4: var(--color-dark-red-300); - --color-ink-green-1: var(--color-dark-green-50); - --color-ink-green-2: var(--color-dark-green-100); - --color-ink-green-3: var(--color-dark-green-200); - --color-ink-amber-1: var(--color-dark-amber-50); - --color-ink-amber-2: var(--color-dark-amber-100); - --color-ink-amber-3: var(--color-dark-amber-200); - --color-ink-blue-1: var(--color-dark-blue-50); - --color-ink-blue-2: var(--color-dark-blue-100); - --color-ink-blue-3: var(--color-dark-blue-200); - --color-ink-cyan-1: var(--color-dark-cyan-50); - --color-ink-pink-1: var(--color-dark-pink-50); - --color-ink-violet-1: var(--color-dark-violet-50); - --color-ink-blue-link: var(--color-dark-blue-300); + --color-ink-white: var(--color-dark-ink-white); + --color-ink-gray-1: var(--color-dark-ink-gray-1); + --color-ink-gray-2: var(--color-dark-ink-gray-2); + --color-ink-gray-3: var(--color-dark-ink-gray-3); + --color-ink-gray-4: var(--color-dark-ink-gray-4); + --color-ink-gray-5: var(--color-dark-ink-gray-5); + --color-ink-gray-6: var(--color-dark-ink-gray-6); + --color-ink-gray-7: var(--color-dark-ink-gray-7); + --color-ink-gray-8: var(--color-dark-ink-gray-8); + --color-ink-gray-9: var(--color-dark-ink-gray-8); + --color-ink-red-1: var(--color-dark-ink-red-1); + --color-ink-red-2: var(--color-dark-ink-red-2); + --color-ink-red-3: var(--color-dark-ink-red-3); + --color-ink-red-4: var(--color-dark-ink-red-4); + --color-ink-green-1: var(--color-dark-ink-green-1); + --color-ink-green-2: var(--color-dark-ink-green-2); + --color-ink-green-3: var(--color-dark-ink-green-3); + --color-ink-amber-1: var(--color-dark-ink-amber-1); + --color-ink-amber-2: var(--color-dark-ink-amber-2); + --color-ink-amber-3: var(--color-dark-ink-amber-3); + --color-ink-blue-1: var(--color-dark-ink-blue-1); + --color-ink-blue-2: var(--color-dark-ink-blue-2); + --color-ink-blue-3: var(--color-dark-ink-blue-3); + --color-ink-cyan-1: var(--color-dark-ink-blue-1); + --color-ink-pink-1: var(--color-dark-ink-blue-1); + --color-ink-violet-1: var(--color-dark-ink-vilot-1); + --color-ink-blue-link: var(--color-dark-ink-blue-link); /* Surface Colors for dark theme */ - --color-surface-white: var(--color-dark-gray-900); - --color-surface-gray-1: var(--color-dark-gray-700); - --color-surface-gray-2: var(--color-dark-gray-650); - --color-surface-gray-3: var(--color-dark-gray-600); - --color-surface-gray-4: var(--color-dark-gray-500); - --color-surface-gray-5: var(--color-dark-gray-200); - --color-surface-gray-6: var(--color-dark-gray-100); - --color-surface-gray-7: var(--color-dark-gray-50); - --color-surface-red-1: var(--color-dark-red-900); - --color-surface-red-2: var(--color-dark-red-800); - --color-surface-red-3: var(--color-dark-red-700); - --color-surface-red-4: var(--color-dark-red-600); - --color-surface-red-5: var(--color-dark-red-500); - --color-surface-red-6: var(--color-dark-red-400); - --color-surface-red-7: var(--color-dark-red-300); - --color-surface-green-1: var(--color-dark-green-900); - --color-surface-green-2: var(--color-dark-green-800); - --color-surface-green-3: var(--color-dark-green-700); - --color-surface-amber-1: var(--color-dark-amber-900); - --color-surface-amber-2: var(--color-dark-amber-800); - --color-surface-amber-3: var(--color-dark-amber-700); - --color-surface-yellow-1: var(--color-dark-yellow-100); - --color-surface-teal-1: var(--color-dark-teal-100); - --color-surface-teal-2: var(--color-dark-teal-600); - --color-surface-blue-1: var(--color-dark-blue-900); - --color-surface-blue-2: var(--color-dark-blue-800); - --color-surface-blue-3: var(--color-dark-blue-700); - --color-surface-orange-1: var(--color-dark-orange-900); - --color-surface-orange-2: var(--color-dark-orange-600); - --color-surface-violet-1: var(--color-dark-violet-900); - --color-surface-violet-1: var(--color-dark-violet-600); - --color-surface-purple-1: var(--color-dark-purple-100); - --color-surface-purple-2: var(--color-dark-purple-600); - --color-surface-cyan-1: var(--color-dark-cyan-900); - --color-surface-cyan-2: var(--color-dark-cyan-600); - --color-surface-pink-1: var(--color-dark-pink-900); - --color-surface-pink-2: var(--color-dark-pink-600); - --color-surface-menu-bar: var(--color-dark-gray-900); - --color-surface-cards: var(--color-dark-gray-800); - --color-surface-modal: var(--color-dark-gray-700); - --color-surface-selected: var(--color-dark-gray-500); + --color-surface-white: var(--color-white); + --color-surface-gray-1: var(--color-gray-200); + --color-surface-gray-2: var(--color-gray-200); + --color-surface-gray-3: var(--color-gray-300); + --color-surface-gray-4: var(--color-gray-400); + --color-surface-gray-5: var(--color-gray-500); + --color-surface-gray-6: var(--color-gray-600); + --color-surface-gray-7: var(--color-gray-700); + --color-surface-red-1: var(--color-red-50); + --color-surface-red-2: var(--color-red-100); + --color-surface-red-3: var(--color-red-200); + --color-surface-red-4: var(--color-red-300); + --color-surface-red-5: var(--color-red-400); + --color-surface-red-6: var(--color-red-500); + --color-surface-red-7: var(--color-red-600); + --color-surface-green-1: var(--color-green-50); + --color-surface-green-2: var(--color-green-100); + --color-surface-green-3: var(--color-green-200); + --color-surface-amber-1: var(--color-amber-50); + --color-surface-amber-2: var(--color-amber-100); + --color-surface-amber-3: var(--color-amber-200); + --color-surface-yellow-1: var(--color-yellow-50); + --color-surface-teal-1: var(--color-teal-50); + --color-surface-teal-2: var(--color-teal-200); + --color-surface-blue-1: var(--color-blue-50); + --color-surface-blue-2: var(--color-blue-100); + --color-surface-blue-3: var(--color-blue-200); + --color-surface-orange-1: var(--color-orange-50); + --color-surface-orange-2: var(--color-orange-200); + --color-surface-violet-1: var(--color-violet-50); + --color-surface-violet-2: var(--color-violet-200); + --color-surface-purple-1: var(--color-purple-50); + --color-surface-purple-2: var(--color-purple-200); + --color-surface-cyan-1: var(--color-cyan-50); + --color-surface-cyan-2: var(--color-cyan-200); + --color-surface-pink-1: var(--color-pink-50); + --color-surface-pink-2: var(--color-pink-200); + --color-surface-menu-bar: var(--color-white); + --color-surface-cards: var(--color-gray-100); + --color-surface-modal: var(--color-gray-200); + --color-surface-selected: var(--color-gray-300); /* Outline Colors for dark theme */ - --color-outline-white: var(--color-dark-gray-800); - --color-outline-gray-1: var(--color-dark-gray-700); - --color-outline-gray-2: var(--color-dark-gray-600); - --color-outline-gray-3: var(--color-dark-gray-500); - --color-outline-gray-4: var(--color-dark-gray-300); - --color-outline-gray-5: var(--color-gray-200); - --color-outline-red-1: var(--color-dark-red-600); - --color-outline-red-2: var(--color-dark-red-500); - --color-outline-red-3: var(--color-dark-red-400); - --color-outline-green-1: var(--color-dark-green-700); - --color-outline-green-2: var(--color-dark-green-800); - --color-outline-amber-1: var(--color-dark-amber-700); - --color-outline-amber-2: var(--color-dark-amber-600); - --color-outline-blue-1: var(--color-dark-blue-700); - --color-outline-orange-1: var(--color-dark-orange-700); - --color-outline-gray-modals: var(--color-dark-gray-600); + --color-outline-white: var(--color-dark-outline-white); + --color-outline-gray-1: var(--color-dark-outline-gray-1); + --color-outline-gray-2: var(--color-dark-outline-gray-2); + --color-outline-gray-3: var(--color-dark-outline-gray-3); + --color-outline-gray-4: var(--color-dark-outline-gray-4); + --color-outline-gray-5: var(--color-dark-outline-gray-5); + --color-outline-red-1: var(--color-dark-outline-red-2); + --color-outline-red-2: var(--color-dark-outline-red-3); + --color-outline-red-3: var(--color-dark-outline-red-4); + --color-outline-green-1: var(--color-dark-outline-green-2); + --color-outline-green-2: var(--color-dark-outline-green-3); + --color-outline-amber-1: var(--color-dark-outline-amber-2); + --color-outline-amber-2: var(--color-dark-outline-amber-3); + --color-outline-blue-1: var(--color-dark-outline-blue-2); + --color-outline-orange-1: var(--color-dark-outline-orange-3); + --color-outline-gray-modals: var(--color-dark-outline-gray-modal); + + /* Focus Colors for dark theme */ + --color-focus-gray: var(--color-dark-focus-gray); + --color-focus-blue: var(--color-dark-focus-blue); + --color-focus-green: var(--color-dark-focus-green); + --color-focus-red: var(--color-dark-focus-red); + --color-focus-amber: var(--color-dark-focus-amber); /* Dark theme shadows - make them more prominent */ --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.3); diff --git a/packages/frappe-ui-react/tsconfig.json b/packages/frappe-ui-react/tsconfig.json index cd9753ea..7147213a 100644 --- a/packages/frappe-ui-react/tsconfig.json +++ b/packages/frappe-ui-react/tsconfig.json @@ -21,6 +21,7 @@ "dist-types", "src/utils/tailwind.config.cjs", "**/*.test.ts", + "**/*.mdx", "**/tests/**/*.ts", "**/tests/**/*.tsx" ] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7ec5c72d..36bdddac 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -164,7 +164,7 @@ importers: version: 2.11.8 '@tailwindcss/typography': specifier: ^0.5.19 - version: 0.5.19(tailwindcss@4.1.18) + version: 0.5.19 '@tiptap/extension-blockquote': specifier: ^3.17.1 version: 3.19.0(@tiptap/core@3.19.0(@tiptap/pm@3.19.0)) @@ -249,9 +249,6 @@ importers: tailwind-merge: specifier: ^3.4.0 version: 3.4.0 - tailwindcss: - specifier: ^4.1.18 - version: 4.1.18 devDependencies: '@types/feather-icons': specifier: ^4.29.4 @@ -6978,10 +6975,9 @@ snapshots: '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18 '@tailwindcss/oxide-win32-x64-msvc': 4.1.18 - '@tailwindcss/typography@0.5.19(tailwindcss@4.1.18)': + '@tailwindcss/typography@0.5.19': dependencies: postcss-selector-parser: 6.0.10 - tailwindcss: 4.1.18 '@tailwindcss/vite@4.1.18(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))': dependencies: From fcb4f6ccbdc3e4b1c9d77adeba356f785b5ae4df Mon Sep 17 00:00:00 2001 From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> Date: Mon, 23 Feb 2026 11:24:17 +0530 Subject: [PATCH 003/317] fix: surface colors Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> --- packages/frappe-ui-react/src/theme.css | 231 +++++++++++++++---------- 1 file changed, 137 insertions(+), 94 deletions(-) diff --git a/packages/frappe-ui-react/src/theme.css b/packages/frappe-ui-react/src/theme.css index 4838615a..59d2a7e0 100644 --- a/packages/frappe-ui-react/src/theme.css +++ b/packages/frappe-ui-react/src/theme.css @@ -448,59 +448,102 @@ input { --color-dark-ink-alert-button-error: var(--color-dark-red-200); /* Surface Colors (Backgrounds) */ - --color-surface-white: var(--color-dark-gray-950); - --color-surface-gray-1: var(--color-dark-gray-800); - --color-surface-gray-2: var(--color-dark-gray-700); - --color-surface-gray-3: var(--color-dark-gray-600); - --color-surface-gray-4: var(--color-dark-gray-500); - --color-surface-gray-5: var(--color-dark-gray-200); - --color-surface-gray-6: var(--color-dark-gray-100); - --color-surface-gray-7: var(--color-dark-gray-50); - --color-surface-red-1: var(--color-dark-red-950); - --color-surface-red-2: var(--color-dark-red-900); - --color-surface-red-3: var(--color-dark-red-800); - --color-surface-red-4: var(--color-dark-red-700); - --color-surface-red-5: var(--color-dark-red-500); - --color-surface-red-6: var(--color-dark-red-400); - --color-surface-red-7: var(--color-dark-red-600); - --color-surface-green-1: var(--color-dark-green-950); - --color-surface-green-2: var(--color-dark-green-900); - --color-surface-green-3: var(--color-dark-green-800); - --color-surface-green-4: var(--color-dark-green-700); - --color-surface-green-5: var(--color-dark-green-500); - --color-surface-green-6: var(--color-dark-green-400); - --color-surface-green-7: var(--color-dark-green-600); - --color-surface-amber-1: var(--color-dark-amber-950); - --color-surface-amber-2: var(--color-dark-amber-900); - --color-surface-amber-3: var(--color-dark-amber-800); - --color-surface-amber-4: var(--color-dark-amber-700); - --color-surface-amber-5: var(--color-dark-amber-500); - --color-surface-amber-6: var(--color-dark-amber-400); - --color-surface-amber-7: var(--color-dark-amber-600); - --color-surface-blue-1: var(--color-dark-blue-950); - --color-surface-blue-2: var(--color-dark-blue-900); - --color-surface-blue-3: var(--color-dark-blue-800); - --color-surface-blue-4: var(--color-dark-blue-700); - --color-surface-blue-5: var(--color-dark-blue-500); - --color-surface-blue-6: var(--color-dark-blue-400); - --color-surface-blue-7: var(--color-dark-blue-600); - --color-surface-orange-2: var(--color-dark-orange-900); - --color-surface-violet-2: var(--color-dark-violet-900); - --color-surface-violet-3: var(--color-dark-violet-800); - --color-surface-violet-4: var(--color-dark-violet-700); - --color-surface-violet-5: var(--color-dark-violet-500); - --color-surface-violet-6: var(--color-dark-violet-400); - --color-surface-violet-7: var(--color-dark-violet-600); - --color-surface-cyan-2: var(--color-dark-cyan-900); - --color-surface-menu-bar: var(--color-dark-gray-950); - --color-surface-card: var(--color-dark-gray-900); - --color-surface-modal: var(--color-dark-gray-600); - --color-surface-selected: var(--color-gray-600); - --color-surface-alert-button-default: var(--color-dark-gray-500); - --color-surface-alert-button-info: var(--color-dark-blue-500); - --color-surface-alert-button-success: var(--color-dark-green-500); - --color-surface-alert-button-warning: var(--color-dark-amber-500); - --color-surface-alert-button-error: var(--color-dark-red-500); + --color-surface-white: var(--color-white); + --color-surface-gray-1: var(--color-gray-200); + --color-surface-gray-2: var(--color-gray-200); + --color-surface-gray-3: var(--color-gray-300); + --color-surface-gray-4: var(--color-gray-400); + --color-surface-gray-5: var(--color-gray-500); + --color-surface-gray-6: var(--color-gray-600); + --color-surface-gray-7: var(--color-gray-700); + --color-surface-red-1: var(--color-red-50); + --color-surface-red-2: var(--color-red-100); + --color-surface-red-3: var(--color-red-200); + --color-surface-red-4: var(--color-red-300); + --color-surface-red-5: var(--color-red-400); + --color-surface-red-6: var(--color-red-500); + --color-surface-red-7: var(--color-red-600); + --color-surface-green-1: var(--color-green-50); + --color-surface-green-2: var(--color-green-100); + --color-surface-green-3: var(--color-green-200); + --color-surface-amber-1: var(--color-amber-50); + --color-surface-amber-2: var(--color-amber-100); + --color-surface-amber-3: var(--color-amber-200); + --color-surface-yellow-1: var(--color-yellow-50); + --color-surface-teal-1: var(--color-teal-50); + --color-surface-teal-2: var(--color-teal-200); + --color-surface-blue-1: var(--color-blue-50); + --color-surface-blue-2: var(--color-blue-100); + --color-surface-blue-3: var(--color-blue-200); + --color-surface-orange-1: var(--color-orange-50); + --color-surface-orange-2: var(--color-orange-200); + --color-surface-violet-1: var(--color-violet-50); + --color-surface-violet-2: var(--color-violet-200); + --color-surface-purple-1: var(--color-purple-50); + --color-surface-purple-2: var(--color-purple-200); + --color-surface-cyan-1: var(--color-cyan-50); + --color-surface-cyan-2: var(--color-cyan-200); + --color-surface-pink-1: var(--color-pink-50); + --color-surface-pink-2: var(--color-pink-200); + --color-surface-menu-bar: var(--color-white); + --color-surface-cards: var(--color-gray-100); + --color-surface-modal: var(--color-gray-200); + --color-surface-selected: var(--color-gray-300); + + /* Surface Colors dark (Backgrounds) */ + --color-dark-surface-white: var(--color-dark-gray-950); + --color-dark-surface-gray-1: var(--color-dark-gray-800); + --color-dark-surface-gray-2: var(--color-dark-gray-700); + --color-dark-surface-gray-3: var(--color-dark-gray-600); + --color-dark-surface-gray-4: var(--color-dark-gray-500); + --color-dark-surface-gray-5: var(--color-dark-gray-200); + --color-dark-surface-gray-6: var(--color-dark-gray-100); + --color-dark-surface-gray-7: var(--color-dark-gray-50); + --color-dark-surface-red-1: var(--color-dark-red-950); + --color-dark-surface-red-2: var(--color-dark-red-900); + --color-dark-surface-red-3: var(--color-dark-red-800); + --color-dark-surface-red-4: var(--color-dark-red-700); + --color-dark-surface-red-5: var(--color-dark-red-500); + --color-dark-surface-red-6: var(--color-dark-red-400); + --color-dark-surface-red-7: var(--color-dark-red-600); + --color-dark-surface-green-1: var(--color-dark-green-950); + --color-dark-surface-green-2: var(--color-dark-green-900); + --color-dark-surface-green-3: var(--color-dark-green-800); + --color-dark-surface-green-4: var(--color-dark-green-700); + --color-dark-surface-green-5: var(--color-dark-green-500); + --color-dark-surface-green-6: var(--color-dark-green-400); + --color-dark-surface-green-7: var(--color-dark-green-600); + --color-dark-surface-amber-1: var(--color-dark-amber-950); + --color-dark-surface-amber-2: var(--color-dark-amber-900); + --color-dark-surface-amber-3: var(--color-dark-amber-800); + --color-dark-surface-amber-4: var(--color-dark-amber-700); + --color-dark-surface-amber-5: var(--color-dark-amber-500); + --color-dark-surface-amber-6: var(--color-dark-amber-400); + --color-dark-surface-amber-7: var(--color-dark-amber-600); + --color-dark-surface-blue-1: var(--color-dark-blue-950); + --color-dark-surface-blue-2: var(--color-dark-blue-900); + --color-dark-surface-blue-3: var(--color-dark-blue-800); + --color-dark-surface-blue-4: var(--color-dark-blue-700); + --color-dark-surface-blue-5: var(--color-dark-blue-500); + --color-dark-surface-blue-6: var(--color-dark-blue-400); + --color-dark-surface-blue-7: var(--color-dark-blue-600); + --color-dark-surface-orange-2: var(--color-dark-orange-900); + --color-dark-surface-violet-2: var(--color-dark-violet-900); + --color-dark-surface-violet-3: var(--color-dark-violet-800); + --color-dark-surface-violet-4: var(--color-dark-violet-700); + --color-dark-surface-violet-5: var(--color-dark-violet-500); + --color-dark-surface-violet-6: var(--color-dark-violet-400); + --color-dark-surface-violet-7: var(--color-dark-violet-600); + --color-dark-surface-cyan-2: var(--color-dark-cyan-900); + --color-dark-surface-menu-bar: var(--color-dark-gray-950); + --color-dark-surface-card: var(--color-dark-gray-900); + --color-dark-surface-modal: var(--color-dark-gray-600); + --color-dark-surface-selected: var(--color-gray-600); + --color-dark-surface-alert-button-default: var(--color-dark-gray-500); + --color-dark-surface-alert-button-info: var(--color-dark-blue-500); + --color-dark-surface-alert-button-success: var(--color-dark-green-500); + --color-dark-surface-alert-button-warning: var(--color-dark-amber-500); + --color-dark-surface-alert-button-error: var(--color-dark-red-500); /* Focused State */ --color-focus-gray: #C9C9C9E5; @@ -775,47 +818,47 @@ input { --color-ink-blue-link: var(--color-dark-ink-blue-link); /* Surface Colors for dark theme */ - --color-surface-white: var(--color-white); - --color-surface-gray-1: var(--color-gray-200); - --color-surface-gray-2: var(--color-gray-200); - --color-surface-gray-3: var(--color-gray-300); - --color-surface-gray-4: var(--color-gray-400); - --color-surface-gray-5: var(--color-gray-500); - --color-surface-gray-6: var(--color-gray-600); - --color-surface-gray-7: var(--color-gray-700); - --color-surface-red-1: var(--color-red-50); - --color-surface-red-2: var(--color-red-100); - --color-surface-red-3: var(--color-red-200); - --color-surface-red-4: var(--color-red-300); - --color-surface-red-5: var(--color-red-400); - --color-surface-red-6: var(--color-red-500); - --color-surface-red-7: var(--color-red-600); - --color-surface-green-1: var(--color-green-50); - --color-surface-green-2: var(--color-green-100); - --color-surface-green-3: var(--color-green-200); - --color-surface-amber-1: var(--color-amber-50); - --color-surface-amber-2: var(--color-amber-100); - --color-surface-amber-3: var(--color-amber-200); - --color-surface-yellow-1: var(--color-yellow-50); - --color-surface-teal-1: var(--color-teal-50); - --color-surface-teal-2: var(--color-teal-200); - --color-surface-blue-1: var(--color-blue-50); - --color-surface-blue-2: var(--color-blue-100); - --color-surface-blue-3: var(--color-blue-200); - --color-surface-orange-1: var(--color-orange-50); - --color-surface-orange-2: var(--color-orange-200); - --color-surface-violet-1: var(--color-violet-50); - --color-surface-violet-2: var(--color-violet-200); - --color-surface-purple-1: var(--color-purple-50); - --color-surface-purple-2: var(--color-purple-200); - --color-surface-cyan-1: var(--color-cyan-50); - --color-surface-cyan-2: var(--color-cyan-200); - --color-surface-pink-1: var(--color-pink-50); - --color-surface-pink-2: var(--color-pink-200); - --color-surface-menu-bar: var(--color-white); - --color-surface-cards: var(--color-gray-100); - --color-surface-modal: var(--color-gray-200); - --color-surface-selected: var(--color-gray-300); + --color-surface-white: var(--color-dark-white); + --color-surface-gray-1: var(--color-dark-surface-gray-1); + --color-surface-gray-2: var(--color-dark-surface-gray-2); + --color-surface-gray-3: var(--color-dark-surface-gray-3); + --color-surface-gray-4: var(--color-dark-surface-gray-4); + --color-surface-gray-5: var(--color-dark-surface-gray-4); + --color-surface-gray-6: var(--color-dark-surface-gray-5); + --color-surface-gray-7: var(--color-dark-surface-gray-6); + --color-surface-red-1: var(--color-dark-surface-red-1); + --color-surface-red-2: var(--color-dark-surface-red-2); + --color-surface-red-3: var(--color-dark-surface-red-3); + --color-surface-red-4: var(--color-dark-surface-red-4); + --color-surface-red-5: var(--color-dark-surface-red-5); + --color-surface-red-6: var(--color-dark-surface-red-6); + --color-surface-red-7: var(--color-dark-surface-red-7); + --color-surface-green-1: var(--color-dark-surface-green-1); + --color-surface-green-2: var(--color-dark-surface-green-2); + --color-surface-green-3: var(--color-dark-surface-green-3); + --color-surface-amber-1: var(--color-dark-surface-amber-1); + --color-surface-amber-2: var(--color-dark-surface-amber-2); + --color-surface-amber-3: var(--color-dark-surface-amber-3); + --color-surface-yellow-1: var(--color-dark-surface-yellow-1); + --color-surface-teal-1: var(--color-dark-surface-teal-1); + --color-surface-teal-2: var(--color-dark-surface-teal-2); + --color-surface-blue-1: var(--color-dark-surface-blue-1); + --color-surface-blue-2: var(--color-dark-surface-blue-2); + --color-surface-blue-3: var(--color-dark-surface-blue-3); + --color-surface-orange-1: var(--color-dark-surface-orange-1); + --color-surface-orange-2: var(--color-dark-surface-orange-2); + --color-surface-violet-1: var(--color-dark-surface-violet-1); + --color-surface-violet-2: var(--color-dark-surface-violet-2); + --color-surface-purple-1: var(--color-dark-surface-purple-1); + --color-surface-purple-2: var(--color-dark-surface-purple-2); + --color-surface-cyan-1: var(--color-dark-surface-cyan-1); + --color-surface-cyan-2: var(--color-dark-surface-cyan-2); + --color-surface-pink-1: var(--color-dark-surface-pink-1); + --color-surface-pink-2: var(--color-dark-surface-pink-2); + --color-surface-menu-bar: var(--color-dark-surface-menu-bar); + --color-surface-cards: var(--color-dark-surface-cards); + --color-surface-modal: var(--color-dark-surface-modal); + --color-surface-selected: var(--color-dark-surface-selected); /* Outline Colors for dark theme */ --color-outline-white: var(--color-dark-outline-white); From 053a2a0e2c344ad3cda552727eb4f5e1a768a068 Mon Sep 17 00:00:00 2001 From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> Date: Mon, 23 Feb 2026 12:04:32 +0530 Subject: [PATCH 004/317] fix: sidebar Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> --- .../src/components/divider/divider.tsx | 15 ++-- .../src/components/divider/types.ts | 1 + .../components/sidebar/sidebar.stories.tsx | 68 ++++++++----------- .../src/components/sidebar/sidebar.tsx | 15 ++-- 4 files changed, 46 insertions(+), 53 deletions(-) diff --git a/packages/frappe-ui-react/src/components/divider/divider.tsx b/packages/frappe-ui-react/src/components/divider/divider.tsx index c49b7b0e..35657056 100644 --- a/packages/frappe-ui-react/src/components/divider/divider.tsx +++ b/packages/frappe-ui-react/src/components/divider/divider.tsx @@ -1,13 +1,14 @@ import { useMemo } from "react"; -import clsx from "clsx"; import { Button } from "../button"; import type { DividerProps } from "./types"; +import { cn } from "../../utils"; const Divider = ({ orientation = "horizontal", position = "center", flexItem = false, + className = "", action, }: DividerProps) => { const alignmentClasses = useMemo(() => { @@ -38,12 +39,13 @@ const Divider = ({ return action ? (
- + + )); + } + + return ( + setCollapsed(!collapsed)} + > + + {!sidebarCollapsed && ( + + + + )} + {sidebarCollapsed && ( +
- {label} - -
- )} - {/* Collapsible nav */} -
+ )} +

+ {label} +

+ + {items.map((item: any) => ( - + ))} - - + + ); }; diff --git a/packages/frappe-ui-react/src/theme.css b/packages/frappe-ui-react/src/theme.css index 59d2a7e0..b5cd245a 100644 --- a/packages/frappe-ui-react/src/theme.css +++ b/packages/frappe-ui-react/src/theme.css @@ -485,7 +485,7 @@ input { --color-surface-cyan-2: var(--color-cyan-200); --color-surface-pink-1: var(--color-pink-50); --color-surface-pink-2: var(--color-pink-200); - --color-surface-menu-bar: var(--color-white); + --color-surface-menu-bar: var(--color-gray-50); --color-surface-cards: var(--color-gray-100); --color-surface-modal: var(--color-gray-200); --color-surface-selected: var(--color-gray-300); From 4202dc5d9d7b23ad3c6a62142d55303296a73d62 Mon Sep 17 00:00:00 2001 From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> Date: Mon, 23 Feb 2026 21:54:58 +0530 Subject: [PATCH 009/317] fix: eslint warning Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> --- .../src/components/sidebar/sidebar.tsx | 22 +++++-------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/packages/frappe-ui-react/src/components/sidebar/sidebar.tsx b/packages/frappe-ui-react/src/components/sidebar/sidebar.tsx index e2960129..333d294c 100644 --- a/packages/frappe-ui-react/src/components/sidebar/sidebar.tsx +++ b/packages/frappe-ui-react/src/components/sidebar/sidebar.tsx @@ -1,4 +1,4 @@ -import React, { useState, useCallback, useEffect } from "react"; +import React, { useState, useCallback } from "react"; import SidebarHeader from "./sidebarHeader"; import SidebarSection from "./sidebarSection"; @@ -36,8 +36,11 @@ const Sidebar: React.FC = ({ children, className = "", }) => { + // Responsive behavior - auto-collapse on small screens + const isMobile = useMediaQuery("(max-width: 640px)"); + // Internal collapse state - const [internalCollapsed, setInternalCollapsed] = useState(false); + const [internalCollapsed, setInternalCollapsed] = useState(isMobile); const isControlled = typeof collapsedProp === "boolean"; const isCollapsed = isControlled ? collapsedProp : internalCollapsed; @@ -53,16 +56,6 @@ const Sidebar: React.FC = ({ [isControlled, onCollapseChange] ); - // Responsive behavior - auto-collapse on small screens - const isMobile = useMediaQuery("(max-width: 640px)"); - - // Auto collapse sidebar on mobile - useEffect(() => { - if (isMobile && !isCollapsed) { - setCollapsed(true); - } - }, [isMobile, isCollapsed, setCollapsed]); - // Compute whether sidebar should be collapsed (either manually or due to mobile) const shouldCollapse = isCollapsed || isMobile; @@ -93,10 +86,7 @@ const Sidebar: React.FC = ({ )} {sections.map((section, index) => ( - + {index !== sections.length - 1 && } ))} From 45845c7d86a2211137ddc0697689aa7ef570e880 Mon Sep 17 00:00:00 2001 From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> Date: Tue, 24 Feb 2026 13:45:21 +0530 Subject: [PATCH 010/317] chore: fix build problems Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> --- .../components/autoComplete/autoComplete.stories.tsx | 4 +++- .../src/components/avatar/avatar.stories.tsx | 1 - .../src/components/charts/chart.stories.tsx | 1 - .../src/components/listview/listView.stories.tsx | 11 +++++++---- .../src/components/popover/popover.stories.tsx | 1 - .../src/components/textInput/textInput.stories.tsx | 6 +++--- .../src/components/typography/index.stories.tsx | 1 - packages/frappe-ui-react/tsconfig.json | 2 +- 8 files changed, 14 insertions(+), 13 deletions(-) diff --git a/packages/frappe-ui-react/src/components/autoComplete/autoComplete.stories.tsx b/packages/frappe-ui-react/src/components/autoComplete/autoComplete.stories.tsx index f6bd3a77..8beafef1 100644 --- a/packages/frappe-ui-react/src/components/autoComplete/autoComplete.stories.tsx +++ b/packages/frappe-ui-react/src/components/autoComplete/autoComplete.stories.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import { useState } from "react"; import type { Meta, StoryObj } from "@storybook/react-vite"; import Autocomplete from "./autoComplete"; @@ -164,6 +164,7 @@ export const SingleOptionWithPrefixSlots: Story = { setValue(_value as string); }} options={options} + //@ts-expect-error -- this is fine since we have specified object type in docuementation compareFn={(a, b) => a?.value === b?.value} /> @@ -188,6 +189,7 @@ export const SingleOptionWithoutSearch: Story = { setValues(_value as string[]); }} options={options} + //@ts-expect-error -- this is fine since we have specified object type in docuementation compareFn={(a, b) => a?.value === b?.value} /> diff --git a/packages/frappe-ui-react/src/components/avatar/avatar.stories.tsx b/packages/frappe-ui-react/src/components/avatar/avatar.stories.tsx index 32aec21d..0f3b9b5b 100644 --- a/packages/frappe-ui-react/src/components/avatar/avatar.stories.tsx +++ b/packages/frappe-ui-react/src/components/avatar/avatar.stories.tsx @@ -1,4 +1,3 @@ -import React from "react"; import Avatar from "./avatar"; import type { StoryObj } from "@storybook/react-vite"; diff --git a/packages/frappe-ui-react/src/components/charts/chart.stories.tsx b/packages/frappe-ui-react/src/components/charts/chart.stories.tsx index 236472aa..8f31568d 100644 --- a/packages/frappe-ui-react/src/components/charts/chart.stories.tsx +++ b/packages/frappe-ui-react/src/components/charts/chart.stories.tsx @@ -1,4 +1,3 @@ -import React from "react"; import type { Meta, StoryObj } from "@storybook/react-vite"; import AxisChart, { type AxisChartProps } from "./axisChart"; diff --git a/packages/frappe-ui-react/src/components/listview/listView.stories.tsx b/packages/frappe-ui-react/src/components/listview/listView.stories.tsx index 8bb31c9c..bbc018d6 100644 --- a/packages/frappe-ui-react/src/components/listview/listView.stories.tsx +++ b/packages/frappe-ui-react/src/components/listview/listView.stories.tsx @@ -5,7 +5,7 @@ import ListView from "./listView"; import { Avatar } from "../avatar"; import { Badge } from "../badge"; import { Button } from "../button"; -import FeatherIcon from "../featherIcon"; +import FeatherIcon, { type FeatherIconProps } from "../featherIcon"; import ListHeader from "./listHeader"; import ListHeaderItem from "./listHeaderItem"; import ListRow from "./listRow"; @@ -18,8 +18,8 @@ const simple_columns = [ label: "Name", key: "name", width: 3, - getLabel: ({ row }) => row.name, - prefix: ({ row }) => ( + getLabel: ({ row }: { row: { name: string } }) => row.name, + prefix: ({ row }: { row: { user_image: string; name: string } }) => ( - + {column.label} diff --git a/packages/frappe-ui-react/src/components/popover/popover.stories.tsx b/packages/frappe-ui-react/src/components/popover/popover.stories.tsx index d5513acf..742a97ac 100644 --- a/packages/frappe-ui-react/src/components/popover/popover.stories.tsx +++ b/packages/frappe-ui-react/src/components/popover/popover.stories.tsx @@ -1,4 +1,3 @@ -import React from "react"; import type { Meta, StoryObj } from "@storybook/react-vite"; import Popover from "./popover"; diff --git a/packages/frappe-ui-react/src/components/textInput/textInput.stories.tsx b/packages/frappe-ui-react/src/components/textInput/textInput.stories.tsx index 5bb6e50d..5a58fb00 100644 --- a/packages/frappe-ui-react/src/components/textInput/textInput.stories.tsx +++ b/packages/frappe-ui-react/src/components/textInput/textInput.stories.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; import type { Meta, StoryObj } from "@storybook/react-vite"; import type { TextInputProps } from "./types"; import TextInput from "./textInput"; -import { Avatar } from "../avatar"; +import { Avatar, type AvatarProps } from "../avatar"; import FeatherIcon from "../featherIcon"; export default { @@ -192,7 +192,7 @@ export const PrefixSlotIcon = { args: { type: "url", placeholder: "Placeholder", - prefix: (size) => ( + prefix: (size: string) => ( ), value: "", @@ -214,7 +214,7 @@ export const PrefixSlotAvatar = { args: { type: "url", placeholder: "Placeholder", - prefix: (size) => ( + prefix: (size: AvatarProps["size"]) => ( Date: Tue, 24 Feb 2026 16:46:39 +0530 Subject: [PATCH 011/317] chore: revert changes to theme.css Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> --- packages/frappe-ui-react/src/theme.css | 630 +++++++++---------------- 1 file changed, 234 insertions(+), 396 deletions(-) diff --git a/packages/frappe-ui-react/src/theme.css b/packages/frappe-ui-react/src/theme.css index b5cd245a..05ad3c20 100644 --- a/packages/frappe-ui-react/src/theme.css +++ b/packages/frappe-ui-react/src/theme.css @@ -7,6 +7,7 @@ @custom-variant dark (&:is(.dark *)); + html, body, button, @@ -23,7 +24,8 @@ input { @apply cursor-pointer hover:cursor-pointer; } -@theme { +@layer base { + :root { /* Base Colors */ --color-inherit: inherit; --color-transparent: transparent; @@ -59,7 +61,7 @@ input { --color-green-100: #e4faeb; --color-green-200: #c3f9d3; --color-green-300: #a6efc0; - --color-green-400: #78E09F; + --color-green-400: #86e0a8; --color-green-500: #46b37e; --color-green-600: #278f5e; --color-green-700: #137949; @@ -116,12 +118,12 @@ input { /* Violet Scale */ --color-violet-50: #fbfaff; - --color-violet-100: #eee8ff; + --color-violet-100: #f0ebff; --color-violet-200: #dbd5ff; --color-violet-300: #c9bafb; - --color-violet-400: #a68efe; - --color-violet-500: #7757EE; - --color-violet-600: #664ECC; + --color-violet-400: #b3a1f5; + --color-violet-500: #6846e3; + --color-violet-600: #5f46c7; --color-violet-700: #4f3da1; --color-violet-800: #392980; --color-violet-900: #251959; @@ -155,7 +157,7 @@ input { --color-pink-100: #fde8f5; --color-pink-200: #ffd5f0; --color-pink-300: #f9b9e0; - --color-pink-400: #f77cc6; + --color-pink-400: #f6a7d6; --color-pink-500: #e34aa6; --color-pink-600: #cf3a96; --color-pink-700: #9c2671; @@ -167,7 +169,7 @@ input { --color-purple-100: #f6e9ff; --color-purple-200: #ecd3ff; --color-purple-300: #e2b9fc; - --color-purple-400: #bf78fa; + --color-purple-400: #cfa1f2; --color-purple-500: #9c45e3; --color-purple-600: #8642c2; --color-purple-700: #6e399d; @@ -184,7 +186,7 @@ input { --color-white-overlay-600: #ffffffa1; --color-white-overlay-700: #ffffffb8; --color-white-overlay-800: #ffffffcf; - --color-white-overlay-900: #ffffffe5; + --color-white-overlay-900: #ffffffe6; /* Black Overlay Scale */ --color-black-overlay-50: #00000017; @@ -196,21 +198,21 @@ input { --color-black-overlay-600: #000000a1; --color-black-overlay-700: #000000b8; --color-black-overlay-800: #000000cf; - --color-black-overlay-900: #000000e5; + --color-black-overlay-900: #000000e6; /* Dark Gray Scale */ --color-dark-gray-50: #f8f8f8; - --color-dark-gray-100: #D9D9D9; + --color-dark-gray-100: #d4d4d4; --color-dark-gray-200: #afafaf; + --color-dark-gray-250: #999999; --color-dark-gray-300: #808080; --color-dark-gray-400: #717171; - --color-dark-gray-450: #575757; --color-dark-gray-500: #424242; --color-dark-gray-600: #343434; - --color-dark-gray-700: #2b2b2b; - --color-dark-gray-800: #232323; - --color-dark-gray-900: #1c1c1c; - --color-dark-gray-950: #0F0F0F; + --color-dark-gray-650: #2b2b2b; + --color-dark-gray-700: #232323; + --color-dark-gray-800: #1c1c1c; + --color-dark-gray-900: #0f0f0f; /* Dark Blue Scale */ --color-dark-blue-50: #c9e0f5; @@ -223,47 +225,45 @@ input { --color-dark-blue-700: #063d71; --color-dark-blue-800: #052b53; --color-dark-blue-900: #0e2037; - --color-dark-blue-950: #0C1726; + --color-dark-blue-900-80: #0e2037cc; /* Dark Green Scale */ --color-dark-green-50: #c8f3de; --color-dark-green-100: #9be6c1; --color-dark-green-200: #78d7a9; --color-dark-green-300: #58c08e; - --color-dark-green-400: #1DB269; - --color-dark-green-500: #0C9150; - --color-dark-green-600: #077241; + --color-dark-green-400: #1ba964; + --color-dark-green-500: #0a9752; + --color-dark-green-600: #0f814a; --color-dark-green-700: #035831; --color-dark-green-800: #0a3f27; --color-dark-green-900: #0b2e1c; - --color-dark-green-950: #0C2016; /* Dark Red Scale */ - --color-dark-red-50: #FFDEDE; - --color-dark-red-100: #FFC1C1; - --color-dark-red-200: #FE7C7C; + --color-dark-red-50: #ffc1c1; + --color-dark-red-100: #ff9595; + --color-dark-red-200: #fc7474; --color-dark-red-300: #eb4d52; - --color-dark-red-400: #D73232; - --color-dark-red-500: #B01F1F; - --color-dark-red-600: #862020; - --color-dark-red-700: #661717; + --color-dark-red-400: #e43838; + --color-dark-red-500: #c12020; + --color-dark-red-600: #901818; + --color-dark-red-700: #681916; --color-dark-red-800: #521515; - --color-dark-red-900: #3C1316; - --color-dark-red-950: #2A0C0C; - + --color-dark-red-900: #361515; + --color-dark-red-800-90: #521515e6; + --color-dark-red-900-90: #361515e6; /* Dark Amber Scale */ - --color-dark-amber-50: #FFE59A; - --color-dark-amber-100: #F4C25F; - --color-dark-amber-200: #FFAA3E; - --color-dark-amber-300: #FA961F; - --color-dark-amber-400: #E27E1B; + --color-dark-amber-50: #f9e8a5; + --color-dark-amber-100: #f8d16e; + --color-dark-amber-200: #f0ba31; + --color-dark-amber-300: #e79913; + --color-dark-amber-400: #e37d00; --color-dark-amber-500: #cb6d10; - --color-dark-amber-600: #975215; - --color-dark-amber-700: #753A07; - --color-dark-amber-800: #4B2606; + --color-dark-amber-600: #824108; + --color-dark-amber-700: #603007; + --color-dark-amber-800: #4b2606; --color-dark-amber-900: #371e06; - --color-dark-amber-950: #281808; /* Dark Orange Scale */ --color-dark-orange-50: #ffcdad; @@ -275,47 +275,44 @@ input { --color-dark-orange-600: #823906; --color-dark-orange-700: #683108; --color-dark-orange-800: #532707; - --color-dark-orange-900: #361C09; - --color-dark-orange-950: #261407; + --color-dark-orange-900: #401f07; + --color-dark-orange-900-80: #401f07cc; /* Dark Yellow Scale */ - --color-dark-yellow-50: #FFEEB8; - --color-dark-yellow-100: #FFE386; - --color-dark-yellow-200: #F8D76A; - --color-dark-yellow-300: #ECC02E; - --color-dark-yellow-400: #DAAE15; - --color-dark-yellow-500: #C69C12; - --color-dark-yellow-600: #9C7A0A; - --color-dark-yellow-700: #705606; - --color-dark-yellow-800: #5B4605; - --color-dark-yellow-900: #3F3004; - --color-dark-yellow-950: #322604; + --color-dark-yellow-50: #ffe89d; + --color-dark-yellow-100: #f8d76a; + --color-dark-yellow-200: #ecc02e; + --color-dark-yellow-300: #daae15; + --color-dark-yellow-400: #c69c12; + --color-dark-yellow-500: #9c7a0a; + --color-dark-yellow-600: #705606; + --color-dark-yellow-700: #5b4605; + --color-dark-yellow-800: #3f3004; + --color-dark-yellow-900: #322604; /* Dark Teal Scale */ - --color-dark-teal-50: #A0F7ED; - --color-dark-teal-100: #7EF3E7; - --color-dark-teal-200: #51DECF; - --color-dark-teal-300: #28BCAC; - --color-dark-teal-400: #1C988B; + --color-dark-teal-50: #93f2e8; + --color-dark-teal-100: #6ee7db; + --color-dark-teal-200: #52dacc; + --color-dark-teal-300: #3dc6b8; + --color-dark-teal-400: #219c8f; --color-dark-teal-500: #1b7169; - --color-dark-teal-600: #145B54; - --color-dark-teal-700: #0B4942; + --color-dark-teal-600: #13564f; + --color-dark-teal-700: #0c423c; --color-dark-teal-800: #0b3a35; --color-dark-teal-900: #0a2d29; - --color-dark-teal-950: #0A2D29; /* Dark Cyan Scale */ --color-dark-cyan-50: #d0f0fa; - --color-dark-cyan-100: #95E3F6; - --color-dark-cyan-200: #62CAE9; + --color-dark-cyan-100: #a0e6f7; + --color-dark-cyan-200: #68d3f3; --color-dark-cyan-300: #3cb8dc; - --color-dark-cyan-400: #1D94B9; - --color-dark-cyan-500: #107B9B; - --color-dark-cyan-600: #14667F; - --color-dark-cyan-700: #104F62; - --color-dark-cyan-800: #0D3B49; - --color-dark-cyan-900: #0C2D37; - --color-dark-cyan-950: #0C242D; + --color-dark-cyan-400: #2b8dab; + --color-dark-cyan-500: #23728b; + --color-dark-cyan-600: #155266; + --color-dark-cyan-700: #0e3b49; + --color-dark-cyan-800: #0d2b36; + --color-dark-cyan-900: #0b252d; /* Dark Purple Scale */ --color-dark-purple-50: #e5c6fb; @@ -324,54 +321,36 @@ input { --color-dark-purple-300: #b168e8; --color-dark-purple-400: #984bd8; --color-dark-purple-500: #7a2db9; - --color-dark-purple-600: #622195; - --color-dark-purple-700: #491870; + --color-dark-purple-600: #591f89; + --color-dark-purple-700: #47176e; --color-dark-purple-800: #391457; - --color-dark-purple-900: #270E3B; - --color-dark-purple-950: #1F112A; + --color-dark-purple-900: #2e1146; /* Dark Pink Scale */ - --color-dark-pink-50: #FFBBE4; + --color-dark-pink-50: #f6c5de; --color-dark-pink-100: #f69ad1; --color-dark-pink-200: #ed77be; --color-dark-pink-300: #e359ab; --color-dark-pink-400: #cb4394; --color-dark-pink-500: #ac377d; - --color-dark-pink-600: #892660; - --color-dark-pink-700: #6F1D4D; - --color-dark-pink-800: #5B183F; - --color-dark-pink-900: #42132F; - --color-dark-pink-950: #341126; + --color-dark-pink-600: #822a5f; + --color-dark-pink-700: #68204b; + --color-dark-pink-800: #601d46; + --color-dark-pink-900: #471432; + --color-dark-pink-900-80: #471432cc; /* Dark Violet Scale */ - --color-dark-violet-50: #CDBEFF; - --color-dark-violet-100: #BCA9FC; - --color-dark-violet-200: #9F87ED; - --color-dark-violet-300: #9478F8; - --color-dark-violet-400: #8363F1; - --color-dark-violet-500: #5A3EBA; - --color-dark-violet-600: #403397; - --color-dark-violet-700: #3D3286; - --color-dark-violet-800: #291D64; - --color-dark-violet-900: #1F1841; - --color-dark-violet-950: #17132C; - - /* Dark alpha colors */ - --color-dark-red-alpha-50: #FFDEDE; - --color-dark-red-alpha-100: #FFC1C1; - --color-dark-red-alpha-200: #FE7C7C; - --color-dark-red-alpha-300: #FF5858F0; - --color-dark-red-alpha-400: #D73232; - --color-dark-red-alpha-500: #ED2222BA; - --color-dark-red-alpha-600: #ED2D2D8A; - --color-dark-red-alpha-700: #C120207D; - --color-dark-red-alpha-800: #C01B1B61; - --color-dark-red-alpha-900: #5F16168F; - --color-dark-red-alpha-950: #53060666; -} + --color-dark-violet-50: #dacbf7; + --color-dark-violet-100: #c4afee; + --color-dark-violet-200: #b398ef; + --color-dark-violet-300: #9d7cea; + --color-dark-violet-400: #8867e8; + --color-dark-violet-500: #5c3fc2; + --color-dark-violet-600: #4639a6; + --color-dark-violet-700: #332978; + --color-dark-violet-800: #281e5d; + --color-dark-violet-900: #221c42; -@layer base { - :root { /* Semantic Colors */ /* Ink Colors (Text) */ --color-ink-white: var(--color-white); @@ -381,183 +360,69 @@ input { --color-ink-gray-4: var(--color-gray-500); --color-ink-gray-5: var(--color-gray-600); --color-ink-gray-6: var(--color-gray-700); - --color-ink-gray-7: var(--color-gray-800); - --color-ink-gray-8: var(--color-gray-900); + --color-ink-gray-7: var(--color-gray-700); + --color-ink-gray-8: var(--color-gray-800); + --color-ink-gray-9: var(--color-gray-900); --color-ink-red-1: var(--color-red-50); --color-ink-red-2: var(--color-red-400); --color-ink-red-3: var(--color-red-500); - --color-ink-red-4: var(--color-red-700); + --color-ink-red-4: var(--color-red-600); --color-ink-green-1: var(--color-green-50); - --color-ink-green-2: var(--color-green-400); - --color-ink-green-3: var(--color-green-500); - --color-ink-green-4: var(--color-green-700); + --color-ink-green-2: var(--color-green-500); + --color-ink-green-3: var(--color-green-600); --color-ink-amber-1: var(--color-amber-50); - --color-ink-amber-2: var(--color-amber-400); - --color-ink-amber-3: var(--color-amber-500); - --color-ink-amber-4: var(--color-amber-700); + --color-ink-amber-2: var(--color-amber-500); + --color-ink-amber-3: var(--color-amber-600); --color-ink-blue-1: var(--color-blue-50); - --color-ink-blue-2: var(--color-blue-400); - --color-ink-blue-3: var(--color-blue-500); - --color-ink-blue-4: var(--color-blue-700); - --color-ink-vilot-1: var(--color-violet-50); - --color-ink-vilot-2: var(--color-violet-400); - --color-ink-vilot-3: var(--color-violet-500); - --color-ink-vilot-4: var(--color-violet-700); + --color-ink-blue-2: var(--color-blue-500); + --color-ink-blue-3: var(--color-blue-600); + --color-ink-cyan-1: var(--color-cyan-500); + --color-ink-pink-1: var(--color-pink-500); + --color-ink-violet-1: var(--color-violet-500); --color-ink-blue-link: var(--color-blue-400); - --color-ink-alert-button-default: var(--color-gray-900); - --color-ink-alert-button-info: var(--color-gray-900); - --color-ink-alert-button-success: var(--color-gray-900); - --color-ink-alert-button-warning: var(--color-gray-900); - --color-ink-alert-button-error: var(--color-gray-900); - - /* Dark Ink Colors (Text) */ - --color-dark-ink-white: var(--color-dark-gray-950); - --color-dark-ink-gray-1: var(--color-dark-gray-800); - --color-dark-ink-gray-2: var(--color-dark-gray-500); - --color-dark-ink-gray-3: var(--color-dark-gray-450); - --color-dark-ink-gray-4: var(--color-dark-gray-400); - --color-dark-ink-gray-5: var(--color-dark-gray-300); - --color-dark-ink-gray-6: var(--color-dark-gray-200); - --color-dark-ink-gray-7: var(--color-dark-gray-100); - --color-dark-ink-gray-8: var(--color-dark-gray-50); - --color-dak-ink-red-1: var(--color-dark-white); - --color-dark-ink-red-2: var(--color-dark-red-700); - --color-dark-ink-red-3: var(--color-dark-red-400); - --color-dark-ink-red-4: var(--color-dark-red-300); - --color-dark-ink-green-1: var(--color-white); - --color-dark-ink-green-2: var(--color-dark-green-700); - --color-dark-ink-green-3: var(--color-dark-green-400); - --color-dark-ink-green-4: var(--color-dark-green-300); - --color-dark-ink-amber-1: var(--color-dark-white); - --color-dark-ink-amber-2: var(--color-dark-amber-700); - --color-dark-ink-amber-3: var(--color-dark-amber-400); - --color-dark-ink-amber-4: var(--color-dark-amber-300); - --color-dark-ink-blue-1: var(--color-white); - --color-dark-ink-blue-2: var(--color-dark-blue-700); - --color-dark-ink-blue-3: var(--color-dark-blue-400); - --color-dark-ink-blue-4: var(--color-dark-blue-300); - --color-dark-ink-vilot-1: var(--color-white); - --color-dark-ink-vilot-2: var(--color-dark-violet-700); - --color-dark-ink-vilot-3: var(--color-dark-violet-400); - --color-dark-ink-vilot-4: var(--color-dark-violet-300); - --color-dark-ink-blue-link: var(--color-dark-blue-500); - --color-dark-ink-alert-button-default: var(--color-dark-gray-200); - --color-dark-ink-alert-button-info: var(--color-dark-blue-200); - --color-dark-ink-alert-button-success: var(--color-dark-green-200); - --color-dark-ink-alert-button-warning: var(--color-dark-amber-200); - --color-dark-ink-alert-button-error: var(--color-dark-red-200); /* Surface Colors (Backgrounds) */ --color-surface-white: var(--color-white); - --color-surface-gray-1: var(--color-gray-200); - --color-surface-gray-2: var(--color-gray-200); - --color-surface-gray-3: var(--color-gray-300); - --color-surface-gray-4: var(--color-gray-400); - --color-surface-gray-5: var(--color-gray-500); - --color-surface-gray-6: var(--color-gray-600); - --color-surface-gray-7: var(--color-gray-700); + --color-surface-gray-1: var(--color-gray-50); + --color-surface-gray-2: var(--color-gray-100); + --color-surface-gray-3: var(--color-gray-200); + --color-surface-gray-4: var(--color-gray-300); + --color-surface-gray-5: var(--color-gray-700); + --color-surface-gray-6: var(--color-gray-800); + --color-surface-gray-7: var(--color-gray-900); --color-surface-red-1: var(--color-red-50); --color-surface-red-2: var(--color-red-100); --color-surface-red-3: var(--color-red-200); --color-surface-red-4: var(--color-red-300); - --color-surface-red-5: var(--color-red-400); - --color-surface-red-6: var(--color-red-500); - --color-surface-red-7: var(--color-red-600); + --color-surface-red-5: var(--color-red-600); + --color-surface-red-6: var(--color-red-700); + --color-surface-red-7: var(--color-red-800); --color-surface-green-1: var(--color-green-50); --color-surface-green-2: var(--color-green-100); - --color-surface-green-3: var(--color-green-200); + --color-surface-green-3: var(--color-green-600); --color-surface-amber-1: var(--color-amber-50); --color-surface-amber-2: var(--color-amber-100); - --color-surface-amber-3: var(--color-amber-200); - --color-surface-yellow-1: var(--color-yellow-50); - --color-surface-teal-1: var(--color-teal-50); - --color-surface-teal-2: var(--color-teal-200); + --color-surface-amber-3: var(--color-amber-600); --color-surface-blue-1: var(--color-blue-50); --color-surface-blue-2: var(--color-blue-100); - --color-surface-blue-3: var(--color-blue-200); - --color-surface-orange-1: var(--color-orange-50); - --color-surface-orange-2: var(--color-orange-200); - --color-surface-violet-1: var(--color-violet-50); - --color-surface-violet-2: var(--color-violet-200); - --color-surface-purple-1: var(--color-purple-50); - --color-surface-purple-2: var(--color-purple-200); - --color-surface-cyan-1: var(--color-cyan-50); - --color-surface-cyan-2: var(--color-cyan-200); - --color-surface-pink-1: var(--color-pink-50); - --color-surface-pink-2: var(--color-pink-200); + --color-surface-blue-3: var(--color-blue-600); + --color-surface-orange-1: var(--color-orange-100); + --color-surface-orange-2: var(--color-orange-600); + --color-surface-violet-1: var(--color-violet-100); + --color-surface-violet-2: var(--color-violet-600); + --color-surface-purple-1: var(--color-purple-100); + --color-surface-purple-2: var(--color-purple-600); + --color-surface-yellow-1: var(--color-yellow-100); + --color-surface-teal-1: var(--color-teal-100); + --color-surface-teal-2: var(--color-teal-600); + --color-surface-cyan-1: var(--color-cyan-100); + --color-surface-cyan-2: var(--color-cyan-600); + --color-surface-pink-1: var(--color-pink-100); + --color-surface-pink-2: var(--color-pink-600); --color-surface-menu-bar: var(--color-gray-50); - --color-surface-cards: var(--color-gray-100); - --color-surface-modal: var(--color-gray-200); - --color-surface-selected: var(--color-gray-300); - - /* Surface Colors dark (Backgrounds) */ - --color-dark-surface-white: var(--color-dark-gray-950); - --color-dark-surface-gray-1: var(--color-dark-gray-800); - --color-dark-surface-gray-2: var(--color-dark-gray-700); - --color-dark-surface-gray-3: var(--color-dark-gray-600); - --color-dark-surface-gray-4: var(--color-dark-gray-500); - --color-dark-surface-gray-5: var(--color-dark-gray-200); - --color-dark-surface-gray-6: var(--color-dark-gray-100); - --color-dark-surface-gray-7: var(--color-dark-gray-50); - --color-dark-surface-red-1: var(--color-dark-red-950); - --color-dark-surface-red-2: var(--color-dark-red-900); - --color-dark-surface-red-3: var(--color-dark-red-800); - --color-dark-surface-red-4: var(--color-dark-red-700); - --color-dark-surface-red-5: var(--color-dark-red-500); - --color-dark-surface-red-6: var(--color-dark-red-400); - --color-dark-surface-red-7: var(--color-dark-red-600); - --color-dark-surface-green-1: var(--color-dark-green-950); - --color-dark-surface-green-2: var(--color-dark-green-900); - --color-dark-surface-green-3: var(--color-dark-green-800); - --color-dark-surface-green-4: var(--color-dark-green-700); - --color-dark-surface-green-5: var(--color-dark-green-500); - --color-dark-surface-green-6: var(--color-dark-green-400); - --color-dark-surface-green-7: var(--color-dark-green-600); - --color-dark-surface-amber-1: var(--color-dark-amber-950); - --color-dark-surface-amber-2: var(--color-dark-amber-900); - --color-dark-surface-amber-3: var(--color-dark-amber-800); - --color-dark-surface-amber-4: var(--color-dark-amber-700); - --color-dark-surface-amber-5: var(--color-dark-amber-500); - --color-dark-surface-amber-6: var(--color-dark-amber-400); - --color-dark-surface-amber-7: var(--color-dark-amber-600); - --color-dark-surface-blue-1: var(--color-dark-blue-950); - --color-dark-surface-blue-2: var(--color-dark-blue-900); - --color-dark-surface-blue-3: var(--color-dark-blue-800); - --color-dark-surface-blue-4: var(--color-dark-blue-700); - --color-dark-surface-blue-5: var(--color-dark-blue-500); - --color-dark-surface-blue-6: var(--color-dark-blue-400); - --color-dark-surface-blue-7: var(--color-dark-blue-600); - --color-dark-surface-orange-2: var(--color-dark-orange-900); - --color-dark-surface-violet-2: var(--color-dark-violet-900); - --color-dark-surface-violet-3: var(--color-dark-violet-800); - --color-dark-surface-violet-4: var(--color-dark-violet-700); - --color-dark-surface-violet-5: var(--color-dark-violet-500); - --color-dark-surface-violet-6: var(--color-dark-violet-400); - --color-dark-surface-violet-7: var(--color-dark-violet-600); - --color-dark-surface-cyan-2: var(--color-dark-cyan-900); - --color-dark-surface-menu-bar: var(--color-dark-gray-950); - --color-dark-surface-card: var(--color-dark-gray-900); - --color-dark-surface-modal: var(--color-dark-gray-600); - --color-dark-surface-selected: var(--color-gray-600); - --color-dark-surface-alert-button-default: var(--color-dark-gray-500); - --color-dark-surface-alert-button-info: var(--color-dark-blue-500); - --color-dark-surface-alert-button-success: var(--color-dark-green-500); - --color-dark-surface-alert-button-warning: var(--color-dark-amber-500); - --color-dark-surface-alert-button-error: var(--color-dark-red-500); - - /* Focused State */ - --color-focus-gray: #C9C9C9E5; - --color-focus-blue: #65B9FCE5; - --color-focus-green: #5ED29CE5; - --color-focus-red: #FA9C9DE5; - --color-focus-amber: #FFDA7CE5; - - /* Dark Focused State */ - --color-dark-focus-gray: #464646CC; - --color-dark-focus-blue: #0E3D62CC; - --color-dark-focus-green: #1D563BCC; - --color-dark-focus-red: #751819CC; - --color-dark-focus-amber: #744811CC; + --color-surface-cards: var(--color-white); + --color-surface-modal: var(--color-white); + --color-surface-selected: var(--color-white); /* Outline Colors (Borders) */ --color-outline-white: var(--color-white); @@ -566,48 +431,16 @@ input { --color-outline-gray-3: var(--color-gray-400); --color-outline-gray-4: var(--color-gray-500); --color-outline-gray-5: var(--color-gray-800); - --color-outline-red-2: var(--color-red-300); - --color-outline-red-3: var(--color-red-400); - --color-outline-red-4: var(--color-red-500); - --color-outline-green-2: var(--color-green-300); - --color-outline-green-3: var(--color-green-400); - --color-outline-green-4: var(--color-green-500); - --color-outline-amber-2: var(--color-amber-300); - --color-outline-amber-3: var(--color-amber-400); - --color-outline-amber-4: var(--color-amber-500); - --color-outline-blue-2: var(--color-blue-300); - --color-outline-blue-3: var(--color-blue-400); - --color-outline-blue-4: var(--color-blue-500); - --color-outline-orange-3: var(--color-orange-400); - --color-outline-violet-2: var(--color-violet-300); - --color-outline-violet-3: var(--color-violet-400); - --color-outline-violet-4: var(--color-violet-500); - --color-outline-gray-modal: var(--color-gray-200); - - /* Dark Outline Colors (Borders) */ - --color-dark-outline-white: var(--color-dark-gray-950); - --color-dark-outline-gray-1: var(--color-dark-gray-800); - --color-dark-outline-gray-2: var(--color-dark-gray-600); - --color-dark-outline-gray-3: var(--color-dark-gray-500); - --color-dark-outline-gray-4: var(--color-dark-gray-450); - --color-dark-outline-gray-5: var(--color-dark-gray-200); - --color-dark-outline-red-2: var(--color-dark-red-800); - --color-dark-outline-red-3: var(--color-dark-red-700); - --color-dark-outline-red-4: var(--color-dark-red-600); - --color-dark-outline-green-2: var(--color-dark-green-800); - --color-dark-outline-green-3: var(--color-dark-green-700); - --color-dark-outline-green-4: var(--color-dark-green-600); - --color-dark-outline-amber-2: var(--color-dark-amber-800); - --color-dark-outline-amber-3: var(--color-dark-amber-700); - --color-dark-outline-amber-4: var(--color-dark-amber-600); - --color-dark-outline-blue-2: var(--color-dark-blue-800); - --color-dark-outline-blue-3: var(--color-dark-blue-700); - --color-dark-outline-blue-4: var(--color-dark-blue-600); - --color-dark-outline-orange-3: var(--color-dark-orange-700); - --color-dark-outline-violet-2: var(--color-dark-violet-800); - --color-dark-outline-violet-3: var(--color-dark-violet-700); - --color-dark-outline-violet-4: var(--color-dark-violet-600); - --color-dark-outline-gray-modal: var(--color-dark-gray-600); + --color-outline-red-1: var(--color-red-300); + --color-outline-red-2: var(--color-red-400); + --color-outline-red-3: var(--color-red-500); + --color-outline-green-1: var(--color-green-300); + --color-outline-green-2: var(--color-green-400); + --color-outline-amber-1: var(--color-amber-300); + --color-outline-amber-2: var(--color-amber-400); + --color-outline-blue-1: var(--color-blue-300); + --color-outline-orange-1: var(--color-orange-400); + --color-outline-gray-modals: var(--color-gray-200); /* Border Radius */ --radius-none: 0px; @@ -788,102 +621,107 @@ input { .dark { color-scheme: dark; + /* Override colors for dark theme */ + --color-gray-50: var(--color-dark-gray-900); + --color-gray-100: var(--color-dark-gray-800); + --color-gray-200: var(--color-dark-gray-700); + --color-gray-300: var(--color-dark-gray-650); + --color-gray-400: var(--color-dark-gray-600); + --color-gray-500: var(--color-dark-gray-500); + --color-gray-600: var(--color-dark-gray-400); + --color-gray-700: var(--color-dark-gray-300); + --color-gray-800: var(--color-dark-gray-200); + --color-gray-900: var(--color-dark-gray-100); + /* Override semantic colors for dark theme */ - --color-ink-white: var(--color-dark-ink-white); - --color-ink-gray-1: var(--color-dark-ink-gray-1); - --color-ink-gray-2: var(--color-dark-ink-gray-2); - --color-ink-gray-3: var(--color-dark-ink-gray-3); - --color-ink-gray-4: var(--color-dark-ink-gray-4); - --color-ink-gray-5: var(--color-dark-ink-gray-5); - --color-ink-gray-6: var(--color-dark-ink-gray-6); - --color-ink-gray-7: var(--color-dark-ink-gray-7); - --color-ink-gray-8: var(--color-dark-ink-gray-8); - --color-ink-gray-9: var(--color-dark-ink-gray-8); - --color-ink-red-1: var(--color-dark-ink-red-1); - --color-ink-red-2: var(--color-dark-ink-red-2); - --color-ink-red-3: var(--color-dark-ink-red-3); - --color-ink-red-4: var(--color-dark-ink-red-4); - --color-ink-green-1: var(--color-dark-ink-green-1); - --color-ink-green-2: var(--color-dark-ink-green-2); - --color-ink-green-3: var(--color-dark-ink-green-3); - --color-ink-amber-1: var(--color-dark-ink-amber-1); - --color-ink-amber-2: var(--color-dark-ink-amber-2); - --color-ink-amber-3: var(--color-dark-ink-amber-3); - --color-ink-blue-1: var(--color-dark-ink-blue-1); - --color-ink-blue-2: var(--color-dark-ink-blue-2); - --color-ink-blue-3: var(--color-dark-ink-blue-3); - --color-ink-cyan-1: var(--color-dark-ink-blue-1); - --color-ink-pink-1: var(--color-dark-ink-blue-1); - --color-ink-violet-1: var(--color-dark-ink-vilot-1); - --color-ink-blue-link: var(--color-dark-ink-blue-link); + --color-ink-white: var(--color-dark-gray-900); + --color-ink-gray-1: var(--color-dark-gray-700); + --color-ink-gray-2: var(--color-dark-gray-500); + --color-ink-gray-3: var(--color-dark-gray-400); + --color-ink-gray-4: var(--color-dark-gray-400); + --color-ink-gray-5: var(--color-dark-gray-300); + --color-ink-gray-6: var(--color-dark-gray-250); + --color-ink-gray-7: var(--color-dark-gray-200); + --color-ink-gray-8: var(--color-dark-gray-100); + --color-ink-gray-9: var(--color-dark-gray-50); + --color-ink-red-1: var(--color-dark-red-50); + --color-ink-red-2: var(--color-dark-red-100); + --color-ink-red-3: var(--color-dark-red-200); + --color-ink-red-4: var(--color-dark-red-300); + --color-ink-green-1: var(--color-dark-green-50); + --color-ink-green-2: var(--color-dark-green-100); + --color-ink-green-3: var(--color-dark-green-200); + --color-ink-amber-1: var(--color-dark-amber-50); + --color-ink-amber-2: var(--color-dark-amber-100); + --color-ink-amber-3: var(--color-dark-amber-200); + --color-ink-blue-1: var(--color-dark-blue-50); + --color-ink-blue-2: var(--color-dark-blue-100); + --color-ink-blue-3: var(--color-dark-blue-200); + --color-ink-cyan-1: var(--color-dark-cyan-50); + --color-ink-pink-1: var(--color-dark-pink-50); + --color-ink-violet-1: var(--color-dark-violet-50); + --color-ink-blue-link: var(--color-dark-blue-300); /* Surface Colors for dark theme */ - --color-surface-white: var(--color-dark-white); - --color-surface-gray-1: var(--color-dark-surface-gray-1); - --color-surface-gray-2: var(--color-dark-surface-gray-2); - --color-surface-gray-3: var(--color-dark-surface-gray-3); - --color-surface-gray-4: var(--color-dark-surface-gray-4); - --color-surface-gray-5: var(--color-dark-surface-gray-4); - --color-surface-gray-6: var(--color-dark-surface-gray-5); - --color-surface-gray-7: var(--color-dark-surface-gray-6); - --color-surface-red-1: var(--color-dark-surface-red-1); - --color-surface-red-2: var(--color-dark-surface-red-2); - --color-surface-red-3: var(--color-dark-surface-red-3); - --color-surface-red-4: var(--color-dark-surface-red-4); - --color-surface-red-5: var(--color-dark-surface-red-5); - --color-surface-red-6: var(--color-dark-surface-red-6); - --color-surface-red-7: var(--color-dark-surface-red-7); - --color-surface-green-1: var(--color-dark-surface-green-1); - --color-surface-green-2: var(--color-dark-surface-green-2); - --color-surface-green-3: var(--color-dark-surface-green-3); - --color-surface-amber-1: var(--color-dark-surface-amber-1); - --color-surface-amber-2: var(--color-dark-surface-amber-2); - --color-surface-amber-3: var(--color-dark-surface-amber-3); - --color-surface-yellow-1: var(--color-dark-surface-yellow-1); - --color-surface-teal-1: var(--color-dark-surface-teal-1); - --color-surface-teal-2: var(--color-dark-surface-teal-2); - --color-surface-blue-1: var(--color-dark-surface-blue-1); - --color-surface-blue-2: var(--color-dark-surface-blue-2); - --color-surface-blue-3: var(--color-dark-surface-blue-3); - --color-surface-orange-1: var(--color-dark-surface-orange-1); - --color-surface-orange-2: var(--color-dark-surface-orange-2); - --color-surface-violet-1: var(--color-dark-surface-violet-1); - --color-surface-violet-2: var(--color-dark-surface-violet-2); - --color-surface-purple-1: var(--color-dark-surface-purple-1); - --color-surface-purple-2: var(--color-dark-surface-purple-2); - --color-surface-cyan-1: var(--color-dark-surface-cyan-1); - --color-surface-cyan-2: var(--color-dark-surface-cyan-2); - --color-surface-pink-1: var(--color-dark-surface-pink-1); - --color-surface-pink-2: var(--color-dark-surface-pink-2); - --color-surface-menu-bar: var(--color-dark-surface-menu-bar); - --color-surface-cards: var(--color-dark-surface-cards); - --color-surface-modal: var(--color-dark-surface-modal); - --color-surface-selected: var(--color-dark-surface-selected); + --color-surface-white: var(--color-dark-gray-900); + --color-surface-gray-1: var(--color-dark-gray-700); + --color-surface-gray-2: var(--color-dark-gray-650); + --color-surface-gray-3: var(--color-dark-gray-600); + --color-surface-gray-4: var(--color-dark-gray-500); + --color-surface-gray-5: var(--color-dark-gray-200); + --color-surface-gray-6: var(--color-dark-gray-100); + --color-surface-gray-7: var(--color-dark-gray-50); + --color-surface-red-1: var(--color-dark-red-900); + --color-surface-red-2: var(--color-dark-red-800); + --color-surface-red-3: var(--color-dark-red-700); + --color-surface-red-4: var(--color-dark-red-600); + --color-surface-red-5: var(--color-dark-red-500); + --color-surface-red-6: var(--color-dark-red-400); + --color-surface-red-7: var(--color-dark-red-300); + --color-surface-green-1: var(--color-dark-green-900); + --color-surface-green-2: var(--color-dark-green-800); + --color-surface-green-3: var(--color-dark-green-700); + --color-surface-amber-1: var(--color-dark-amber-900); + --color-surface-amber-2: var(--color-dark-amber-800); + --color-surface-amber-3: var(--color-dark-amber-700); + --color-surface-yellow-1: var(--color-dark-yellow-100); + --color-surface-teal-1: var(--color-dark-teal-100); + --color-surface-teal-2: var(--color-dark-teal-600); + --color-surface-blue-1: var(--color-dark-blue-900); + --color-surface-blue-2: var(--color-dark-blue-800); + --color-surface-blue-3: var(--color-dark-blue-700); + --color-surface-orange-1: var(--color-dark-orange-900); + --color-surface-orange-2: var(--color-dark-orange-600); + --color-surface-violet-1: var(--color-dark-violet-900); + --color-surface-violet-1: var(--color-dark-violet-600); + --color-surface-purple-1: var(--color-dark-purple-100); + --color-surface-purple-2: var(--color-dark-purple-600); + --color-surface-cyan-1: var(--color-dark-cyan-900); + --color-surface-cyan-2: var(--color-dark-cyan-600); + --color-surface-pink-1: var(--color-dark-pink-900); + --color-surface-pink-2: var(--color-dark-pink-600); + --color-surface-menu-bar: var(--color-dark-gray-900); + --color-surface-cards: var(--color-dark-gray-800); + --color-surface-modal: var(--color-dark-gray-700); + --color-surface-selected: var(--color-dark-gray-500); /* Outline Colors for dark theme */ - --color-outline-white: var(--color-dark-outline-white); - --color-outline-gray-1: var(--color-dark-outline-gray-1); - --color-outline-gray-2: var(--color-dark-outline-gray-2); - --color-outline-gray-3: var(--color-dark-outline-gray-3); - --color-outline-gray-4: var(--color-dark-outline-gray-4); - --color-outline-gray-5: var(--color-dark-outline-gray-5); - --color-outline-red-1: var(--color-dark-outline-red-2); - --color-outline-red-2: var(--color-dark-outline-red-3); - --color-outline-red-3: var(--color-dark-outline-red-4); - --color-outline-green-1: var(--color-dark-outline-green-2); - --color-outline-green-2: var(--color-dark-outline-green-3); - --color-outline-amber-1: var(--color-dark-outline-amber-2); - --color-outline-amber-2: var(--color-dark-outline-amber-3); - --color-outline-blue-1: var(--color-dark-outline-blue-2); - --color-outline-orange-1: var(--color-dark-outline-orange-3); - --color-outline-gray-modals: var(--color-dark-outline-gray-modal); - - /* Focus Colors for dark theme */ - --color-focus-gray: var(--color-dark-focus-gray); - --color-focus-blue: var(--color-dark-focus-blue); - --color-focus-green: var(--color-dark-focus-green); - --color-focus-red: var(--color-dark-focus-red); - --color-focus-amber: var(--color-dark-focus-amber); + --color-outline-white: var(--color-dark-gray-800); + --color-outline-gray-1: var(--color-dark-gray-700); + --color-outline-gray-2: var(--color-dark-gray-600); + --color-outline-gray-3: var(--color-dark-gray-500); + --color-outline-gray-4: var(--color-dark-gray-300); + --color-outline-gray-5: var(--color-gray-200); + --color-outline-red-1: var(--color-dark-red-600); + --color-outline-red-2: var(--color-dark-red-500); + --color-outline-red-3: var(--color-dark-red-400); + --color-outline-green-1: var(--color-dark-green-700); + --color-outline-green-2: var(--color-dark-green-800); + --color-outline-amber-1: var(--color-dark-amber-700); + --color-outline-amber-2: var(--color-dark-amber-600); + --color-outline-blue-1: var(--color-dark-blue-700); + --color-outline-orange-1: var(--color-dark-orange-700); + --color-outline-gray-modals: var(--color-dark-gray-600); /* Dark theme shadows - make them more prominent */ --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.3); From 1aca4dee2264f22c6738cabd7ea1dbffabe97c88 Mon Sep 17 00:00:00 2001 From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> Date: Tue, 24 Feb 2026 21:17:52 +0530 Subject: [PATCH 012/317] fix: export icons Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> --- .../src/components/sidebar/sidebarSection.tsx | 15 +++++++++------ packages/frappe-ui-react/src/index.ts | 1 + 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/frappe-ui-react/src/components/sidebar/sidebarSection.tsx b/packages/frappe-ui-react/src/components/sidebar/sidebarSection.tsx index e4ff171d..f4174edd 100644 --- a/packages/frappe-ui-react/src/components/sidebar/sidebarSection.tsx +++ b/packages/frappe-ui-react/src/components/sidebar/sidebarSection.tsx @@ -68,16 +68,17 @@ const SidebarSection: React.FC = ({ onOpenChange={() => setCollapsed(!collapsed)} > {!sidebarCollapsed && ( @@ -103,7 +104,9 @@ const SidebarSection: React.FC = ({ {items.map((item: any) => ( - This Week - {status && ( - {statusLabel[status]} +
+
+ {!collapsed && + dates.map((date) => { + const monthAndDay = date.split(" "); + const isToday = date === today; + return ( +
- - - )} + + {monthAndDay[0]}{" "} + + {monthAndDay[1]} + + +
+ ); + })} - {status === "approved" && thisWeek && ( - - )} - {status === "rejected" && thisWeek && ( - - )} - {status === "approval-pending" && thisWeek && ( - +
+ + > + {collapsed ? totalHours : "Total"} + +
+ +
+
); diff --git a/packages/frappe-ui-react/src/theme.css b/packages/frappe-ui-react/src/theme.css index 05ad3c20..7ca87280 100644 --- a/packages/frappe-ui-react/src/theme.css +++ b/packages/frappe-ui-react/src/theme.css @@ -370,9 +370,11 @@ input { --color-ink-green-1: var(--color-green-50); --color-ink-green-2: var(--color-green-500); --color-ink-green-3: var(--color-green-600); + --color-ink-green-4: var(--color-green-700); --color-ink-amber-1: var(--color-amber-50); --color-ink-amber-2: var(--color-amber-500); --color-ink-amber-3: var(--color-amber-600); + --color-ink-amber-4: var(--color-amber-700); --color-ink-blue-1: var(--color-blue-50); --color-ink-blue-2: var(--color-blue-500); --color-ink-blue-3: var(--color-blue-600); @@ -651,9 +653,11 @@ input { --color-ink-green-1: var(--color-dark-green-50); --color-ink-green-2: var(--color-dark-green-100); --color-ink-green-3: var(--color-dark-green-200); + --color-ink-green-4: var(--color-dark-green-300); --color-ink-amber-1: var(--color-dark-amber-50); --color-ink-amber-2: var(--color-dark-amber-100); --color-ink-amber-3: var(--color-dark-amber-200); + --color-ink-amber-4: var(--color-dark-amber-300); --color-ink-blue-1: var(--color-dark-blue-50); --color-ink-blue-2: var(--color-dark-blue-100); --color-ink-blue-3: var(--color-dark-blue-200); diff --git a/packages/frappe-ui-react/src/themeV3.css b/packages/frappe-ui-react/src/themeV3.css index f9c1bcb1..b61749c2 100644 --- a/packages/frappe-ui-react/src/themeV3.css +++ b/packages/frappe-ui-react/src/themeV3.css @@ -368,9 +368,11 @@ input { --color-ink-green-1: var(--color-green-50); --color-ink-green-2: var(--color-green-500); --color-ink-green-3: var(--color-green-600); + --color-ink-green-4: var(--color-green-700); --color-ink-amber-1: var(--color-amber-50); --color-ink-amber-2: var(--color-amber-500); --color-ink-amber-3: var(--color-amber-600); + --color-ink-amber-4: var(--color-amber-700); --color-ink-blue-1: var(--color-blue-50); --color-ink-blue-2: var(--color-blue-500); --color-ink-blue-3: var(--color-blue-600); @@ -651,9 +653,11 @@ input { --color-ink-green-1: var(--color-dark-green-50); --color-ink-green-2: var(--color-dark-green-100); --color-ink-green-3: var(--color-dark-green-200); + --color-ink-green-4: var(--color-dark-green-300); --color-ink-amber-1: var(--color-dark-amber-50); --color-ink-amber-2: var(--color-dark-amber-100); --color-ink-amber-3: var(--color-dark-amber-200); + --color-ink-amber-4: var(--color-dark-amber-300); --color-ink-blue-1: var(--color-dark-blue-50); --color-ink-blue-2: var(--color-dark-blue-100); --color-ink-blue-3: var(--color-dark-blue-200); diff --git a/packages/frappe-ui-react/src/utils/tailwindExtend.json b/packages/frappe-ui-react/src/utils/tailwindExtend.json index 5985152a..3f01829e 100644 --- a/packages/frappe-ui-react/src/utils/tailwindExtend.json +++ b/packages/frappe-ui-react/src/utils/tailwindExtend.json @@ -594,9 +594,11 @@ "green-1": "var(--color-ink-green-1)", "green-2": "var(--color-ink-green-2)", "green-3": "var(--color-ink-green-3)", + "green-4": "var(--color-ink-green-4)", "amber-1": "var(--color-ink-amber-1)", "amber-2": "var(--color-ink-amber-2)", "amber-3": "var(--color-ink-amber-3)", + "amber-4": "var(--color-ink-amber-4)", "blue-1": "var(--color-ink-blue-1)", "blue-2": "var(--color-ink-blue-2)", "blue-3": "var(--color-ink-blue-3)", From 7c65a90703dbc93ff1dba26d8999ffc3562a4ad1 Mon Sep 17 00:00:00 2001 From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> Date: Wed, 25 Feb 2026 12:18:36 +0530 Subject: [PATCH 015/317] fix: update light color tokens Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com> --- packages/frappe-ui-react/src/theme.css | 90 +++--- packages/frappe-ui-react/src/themeV3.css | 358 ++++++++++++----------- 2 files changed, 236 insertions(+), 212 deletions(-) diff --git a/packages/frappe-ui-react/src/theme.css b/packages/frappe-ui-react/src/theme.css index 05ad3c20..2a35ae54 100644 --- a/packages/frappe-ui-react/src/theme.css +++ b/packages/frappe-ui-react/src/theme.css @@ -44,6 +44,8 @@ input { --color-gray-800: #383838; --color-gray-900: #171717; + /* Functional UI */ + /* Blue Scale */ --color-blue-50: #f2f9ff; --color-blue-100: #e6f4ff; @@ -61,7 +63,7 @@ input { --color-green-100: #e4faeb; --color-green-200: #c3f9d3; --color-green-300: #a6efc0; - --color-green-400: #86e0a8; + --color-green-400: #78e09f; --color-green-500: #46b37e; --color-green-600: #278f5e; --color-green-700: #137949; @@ -80,6 +82,22 @@ input { --color-red-800: #941f1f; --color-red-900: #6b1515; + /* Amber Scale */ + --color-amber-50: #fdfaed; + --color-amber-100: #fff7d3; + --color-amber-200: #feeda9; + --color-amber-300: #fbdb73; + --color-amber-400: #fbc53f; + --color-amber-500: #e79913; + --color-amber-600: #db7706; + --color-amber-700: #b35309; + --color-amber-800: #91400d; + --color-amber-900: #763813; + + /* End of Functional UI */ + + /* Brand Colors */ + /* Orange Scale */ --color-orange-50: #fff9f5; --color-orange-100: #ffefe4; @@ -116,19 +134,7 @@ input { --color-teal-800: #115c57; --color-teal-900: #114541; - /* Violet Scale */ - --color-violet-50: #fbfaff; - --color-violet-100: #f0ebff; - --color-violet-200: #dbd5ff; - --color-violet-300: #c9bafb; - --color-violet-400: #b3a1f5; - --color-violet-500: #6846e3; - --color-violet-600: #5f46c7; - --color-violet-700: #4f3da1; - --color-violet-800: #392980; - --color-violet-900: #251959; - - /* Cyan Scale */ + /* Cyan Scale */ --color-cyan-50: #f5fbfc; --color-cyan-100: #ddf7ff; --color-cyan-200: #b3e8f7; @@ -140,41 +146,45 @@ input { --color-cyan-800: #125c73; --color-cyan-900: #164759; - /* Amber Scale */ - --color-amber-50: #fdfaed; - --color-amber-100: #fff7d3; - --color-amber-200: #feeda9; - --color-amber-300: #fbdb73; - --color-amber-400: #fbcc55; - --color-amber-500: #e79913; - --color-amber-600: #db7706; - --color-amber-700: #b35309; - --color-amber-800: #91400d; - --color-amber-900: #763813; + /* Purple Scale */ + --color-purple-50: #fdfaff; + --color-purple-100: #f6e9ff; + --color-purple-200: #ecd3ff; + --color-purple-300: #e2b9fc; + --color-purple-400: #bf78fa; + --color-purple-500: #9c45e3; + --color-purple-600: #8642c2; + --color-purple-700: #6e399d; + --color-purple-800: #5c2f83; + --color-purple-900: #401863; /* Pink Scale */ --color-pink-50: #fff7fc; --color-pink-100: #fde8f5; --color-pink-200: #ffd5f0; --color-pink-300: #f9b9e0; - --color-pink-400: #f6a7d6; + --color-pink-400: #f77cc6; --color-pink-500: #e34aa6; --color-pink-600: #cf3a96; --color-pink-700: #9c2671; --color-pink-800: #801458; --color-pink-900: #570f3e; - /* Purple Scale */ - --color-purple-50: #fdfaff; - --color-purple-100: #f6e9ff; - --color-purple-200: #ecd3ff; - --color-purple-300: #e2b9fc; - --color-purple-400: #cfa1f2; - --color-purple-500: #9c45e3; - --color-purple-600: #8642c2; - --color-purple-700: #6e399d; - --color-purple-800: #5c2f83; - --color-purple-900: #401863; + /* Violet Scale */ + --color-violet-50: #fbfaff; + --color-violet-100: #eee8ff; + --color-violet-200: #dbd5ff; + --color-violet-300: #c9bafb; + --color-violet-400: #a68efe; + --color-violet-500: #7757ee; + --color-violet-600: #664ecc; + --color-violet-700: #4f3da1; + --color-violet-800: #392980; + --color-violet-900: #251959; + + /* End of brand colors */ + + /* Overlay Colors */ /* White Overlay Scale */ --color-white-overlay-50: #ffffff1a; @@ -186,7 +196,7 @@ input { --color-white-overlay-600: #ffffffa1; --color-white-overlay-700: #ffffffb8; --color-white-overlay-800: #ffffffcf; - --color-white-overlay-900: #ffffffe6; + --color-white-overlay-900: #ffffffe5; /* Black Overlay Scale */ --color-black-overlay-50: #00000017; @@ -198,7 +208,9 @@ input { --color-black-overlay-600: #000000a1; --color-black-overlay-700: #000000b8; --color-black-overlay-800: #000000cf; - --color-black-overlay-900: #000000e6; + --color-black-overlay-900: #000000e5; + + /* End of Overlay Colors */ /* Dark Gray Scale */ --color-dark-gray-50: #f8f8f8; diff --git a/packages/frappe-ui-react/src/themeV3.css b/packages/frappe-ui-react/src/themeV3.css index f9c1bcb1..19606b86 100644 --- a/packages/frappe-ui-react/src/themeV3.css +++ b/packages/frappe-ui-react/src/themeV3.css @@ -24,179 +24,191 @@ input { } * { - /* Base Colors */ - --color-inherit: inherit; - --color-transparent: transparent; - --color-black: #000; - --color-white: #fff; - - /* Gray Scale */ - --color-gray-50: #f8f8f8; - --color-gray-100: #f3f3f3; - --color-gray-200: #ededed; - --color-gray-300: #e2e2e2; - --color-gray-400: #c7c7c7; - --color-gray-500: #999999; - --color-gray-600: #7c7c7c; - --color-gray-700: #525252; - --color-gray-800: #383838; - --color-gray-900: #171717; - - /* Blue Scale */ - --color-blue-50: #f2f9ff; - --color-blue-100: #e6f4ff; - --color-blue-200: #c8e6ff; - --color-blue-300: #a7d7fd; - --color-blue-400: #73bbf6; - --color-blue-500: #0289f7; - --color-blue-600: #007be0; - --color-blue-700: #0070cc; - --color-blue-800: #005ca3; - --color-blue-900: #004880; - - /* Green Scale */ - --color-green-50: #f2fdf4; - --color-green-100: #e4faeb; - --color-green-200: #c3f9d3; - --color-green-300: #a6efc0; - --color-green-400: #86e0a8; - --color-green-500: #46b37e; - --color-green-600: #278f5e; - --color-green-700: #137949; - --color-green-800: #075e35; - --color-green-900: #173b2c; - - /* Red Scale */ - --color-red-50: #fff7f7; - --color-red-100: #ffe7e7; - --color-red-200: #ffd8d8; - --color-red-300: #fdc2c2; - --color-red-400: #f79596; - --color-red-500: #e03636; - --color-red-600: #cc2929; - --color-red-700: #b52a2a; - --color-red-800: #941f1f; - --color-red-900: #6b1515; - - /* Orange Scale */ - --color-orange-50: #fff9f5; - --color-orange-100: #ffefe4; - --color-orange-200: #ffdec5; - --color-orange-300: #ffcba3; - --color-orange-400: #f4b07f; - --color-orange-500: #e86c13; - --color-orange-600: #d45a08; - --color-orange-700: #bd3e0c; - --color-orange-800: #9e3513; - --color-orange-900: #6b2711; - - /* Yellow Scale */ - --color-yellow-50: #fffcef; - --color-yellow-100: #fff7d3; - --color-yellow-200: #f7e9a8; - --color-yellow-300: #f5e171; - --color-yellow-400: #f2d14b; - --color-yellow-500: #edba13; - --color-yellow-600: #d1930d; - --color-yellow-700: #ab6e05; - --color-yellow-800: #8c5600; - --color-yellow-900: #733f12; - - /* Teal Scale */ - --color-teal-50: #f0fdfa; - --color-teal-100: #e6f7f4; - --color-teal-200: #bae8e1; - --color-teal-300: #97ded4; - --color-teal-400: #73d1c4; - --color-teal-500: #36baad; - --color-teal-600: #0b9e92; - --color-teal-700: #0f736b; - --color-teal-800: #115c57; - --color-teal-900: #114541; - - /* Violet Scale */ - --color-violet-50: #fbfaff; - --color-violet-100: #f0ebff; - --color-violet-200: #dbd5ff; - --color-violet-300: #c9bafb; - --color-violet-400: #b3a1f5; - --color-violet-500: #6846e3; - --color-violet-600: #5f46c7; - --color-violet-700: #4f3da1; - --color-violet-800: #392980; - --color-violet-900: #251959; - - /* Cyan Scale */ - --color-cyan-50: #f5fbfc; - --color-cyan-100: #ddf7ff; - --color-cyan-200: #b3e8f7; - --color-cyan-300: #99e2f8; - --color-cyan-400: #72d5f3; - --color-cyan-500: #3bbde5; - --color-cyan-600: #32a4c7; - --color-cyan-700: #267a94; - --color-cyan-800: #125c73; - --color-cyan-900: #164759; - - /* Amber Scale */ - --color-amber-50: #fdfaed; - --color-amber-100: #fff7d3; - --color-amber-200: #feeda9; - --color-amber-300: #fbdb73; - --color-amber-400: #fbcc55; - --color-amber-500: #e79913; - --color-amber-600: #db7706; - --color-amber-700: #b35309; - --color-amber-800: #91400d; - --color-amber-900: #763813; - - /* Pink Scale */ - --color-pink-50: #fff7fc; - --color-pink-100: #fde8f5; - --color-pink-200: #ffd5f0; - --color-pink-300: #f9b9e0; - --color-pink-400: #f6a7d6; - --color-pink-500: #e34aa6; - --color-pink-600: #cf3a96; - --color-pink-700: #9c2671; - --color-pink-800: #801458; - --color-pink-900: #570f3e; - - /* Purple Scale */ - --color-purple-50: #fdfaff; - --color-purple-100: #f6e9ff; - --color-purple-200: #ecd3ff; - --color-purple-300: #e2b9fc; - --color-purple-400: #cfa1f2; - --color-purple-500: #9c45e3; - --color-purple-600: #8642c2; - --color-purple-700: #6e399d; - --color-purple-800: #5c2f83; - --color-purple-900: #401863; - - /* White Overlay Scale */ - --color-white-overlay-50: #ffffff1a; - --color-white-overlay-100: #ffffff2e; - --color-white-overlay-200: #ffffff45; - --color-white-overlay-300: #ffffff5c; - --color-white-overlay-400: #ffffff73; - --color-white-overlay-500: #ffffff8a; - --color-white-overlay-600: #ffffffa1; - --color-white-overlay-700: #ffffffb8; - --color-white-overlay-800: #ffffffcf; - --color-white-overlay-900: #ffffffe6; - - /* Black Overlay Scale */ - --color-black-overlay-50: #00000017; - --color-black-overlay-100: #0000002e; - --color-black-overlay-200: #00000045; - --color-black-overlay-300: #0000005c; - --color-black-overlay-400: #00000073; - --color-black-overlay-500: #0000008a; - --color-black-overlay-600: #000000a1; - --color-black-overlay-700: #000000b8; - --color-black-overlay-800: #000000cf; - --color-black-overlay-900: #000000e6; +/* Base Colors */ +--color-inherit: inherit; +--color-transparent: transparent; +--color-black: #000; +--color-white: #fff; + +/* Gray Scale */ +--color-gray-50: #f8f8f8; +--color-gray-100: #f3f3f3; +--color-gray-200: #ededed; +--color-gray-300: #e2e2e2; +--color-gray-400: #c7c7c7; +--color-gray-500: #999999; +--color-gray-600: #7c7c7c; +--color-gray-700: #525252; +--color-gray-800: #383838; +--color-gray-900: #171717; + +/* Functional UI */ + +/* Blue Scale */ +--color-blue-50: #f2f9ff; +--color-blue-100: #e6f4ff; +--color-blue-200: #c8e6ff; +--color-blue-300: #a7d7fd; +--color-blue-400: #73bbf6; +--color-blue-500: #0289f7; +--color-blue-600: #007be0; +--color-blue-700: #0070cc; +--color-blue-800: #005ca3; +--color-blue-900: #004880; + +/* Green Scale */ +--color-green-50: #f2fdf4; +--color-green-100: #e4faeb; +--color-green-200: #c3f9d3; +--color-green-300: #a6efc0; +--color-green-400: #78e09f; +--color-green-500: #46b37e; +--color-green-600: #278f5e; +--color-green-700: #137949; +--color-green-800: #075e35; +--color-green-900: #173b2c; + +/* Red Scale */ +--color-red-50: #fff7f7; +--color-red-100: #ffe7e7; +--color-red-200: #ffd8d8; +--color-red-300: #fdc2c2; +--color-red-400: #f79596; +--color-red-500: #e03636; +--color-red-600: #cc2929; +--color-red-700: #b52a2a; +--color-red-800: #941f1f; +--color-red-900: #6b1515; + +/* Amber Scale */ +--color-amber-50: #fdfaed; +--color-amber-100: #fff7d3; +--color-amber-200: #feeda9; +--color-amber-300: #fbdb73; +--color-amber-400: #fbc53f; +--color-amber-500: #e79913; +--color-amber-600: #db7706; +--color-amber-700: #b35309; +--color-amber-800: #91400d; +--color-amber-900: #763813; + +/* End of Functional UI */ + +/* Brand Colors */ + +/* Orange Scale */ +--color-orange-50: #fff9f5; +--color-orange-100: #ffefe4; +--color-orange-200: #ffdec5; +--color-orange-300: #ffcba3; +--color-orange-400: #f4b07f; +--color-orange-500: #e86c13; +--color-orange-600: #d45a08; +--color-orange-700: #bd3e0c; +--color-orange-800: #9e3513; +--color-orange-900: #6b2711; + +/* Yellow Scale */ +--color-yellow-50: #fffcef; +--color-yellow-100: #fff7d3; +--color-yellow-200: #f7e9a8; +--color-yellow-300: #f5e171; +--color-yellow-400: #f2d14b; +--color-yellow-500: #edba13; +--color-yellow-600: #d1930d; +--color-yellow-700: #ab6e05; +--color-yellow-800: #8c5600; +--color-yellow-900: #733f12; + +/* Teal Scale */ +--color-teal-50: #f0fdfa; +--color-teal-100: #e6f7f4; +--color-teal-200: #bae8e1; +--color-teal-300: #97ded4; +--color-teal-400: #73d1c4; +--color-teal-500: #36baad; +--color-teal-600: #0b9e92; +--color-teal-700: #0f736b; +--color-teal-800: #115c57; +--color-teal-900: #114541; + + /* Cyan Scale */ +--color-cyan-50: #f5fbfc; +--color-cyan-100: #ddf7ff; +--color-cyan-200: #b3e8f7; +--color-cyan-300: #99e2f8; +--color-cyan-400: #72d5f3; +--color-cyan-500: #3bbde5; +--color-cyan-600: #32a4c7; +--color-cyan-700: #267a94; +--color-cyan-800: #125c73; +--color-cyan-900: #164759; + +/* Purple Scale */ +--color-purple-50: #fdfaff; +--color-purple-100: #f6e9ff; +--color-purple-200: #ecd3ff; +--color-purple-300: #e2b9fc; +--color-purple-400: #bf78fa; +--color-purple-500: #9c45e3; +--color-purple-600: #8642c2; +--color-purple-700: #6e399d; +--color-purple-800: #5c2f83; +--color-purple-900: #401863; + +/* Pink Scale */ +--color-pink-50: #fff7fc; +--color-pink-100: #fde8f5; +--color-pink-200: #ffd5f0; +--color-pink-300: #f9b9e0; +--color-pink-400: #f77cc6; +--color-pink-500: #e34aa6; +--color-pink-600: #cf3a96; +--color-pink-700: #9c2671; +--color-pink-800: #801458; +--color-pink-900: #570f3e; + +/* Violet Scale */ +--color-violet-50: #fbfaff; +--color-violet-100: #eee8ff; +--color-violet-200: #dbd5ff; +--color-violet-300: #c9bafb; +--color-violet-400: #a68efe; +--color-violet-500: #7757ee; +--color-violet-600: #664ecc; +--color-violet-700: #4f3da1; +--color-violet-800: #392980; +--color-violet-900: #251959; + +/* End of brand colors */ + +/* Overlay Colors */ + +/* White Overlay Scale */ +--color-white-overlay-50: #ffffff1a; +--color-white-overlay-100: #ffffff2e; +--color-white-overlay-200: #ffffff45; +--color-white-overlay-300: #ffffff5c; +--color-white-overlay-400: #ffffff73; +--color-white-overlay-500: #ffffff8a; +--color-white-overlay-600: #ffffffa1; +--color-white-overlay-700: #ffffffb8; +--color-white-overlay-800: #ffffffcf; +--color-white-overlay-900: #ffffffe5; + +/* Black Overlay Scale */ +--color-black-overlay-50: #00000017; +--color-black-overlay-100: #0000002e; +--color-black-overlay-200: #00000045; +--color-black-overlay-300: #0000005c; +--color-black-overlay-400: #00000073; +--color-black-overlay-500: #0000008a; +--color-black-overlay-600: #000000a1; +--color-black-overlay-700: #000000b8; +--color-black-overlay-800: #000000cf; +--color-black-overlay-900: #000000e5; + +/* End of Overlay Colors */ /* Dark Gray Scale */ --color-dark-gray-50: #f8f8f8; From b8a31cd5222de023f6030aa594de71edf134bad4 Mon Sep 17 00:00:00 2001 From: Aditya Dhade Date: Wed, 25 Feb 2026 12:35:04 +0530 Subject: [PATCH 016/317] Add support for thisWeek prop and None status --- .../timesheet/rows/rowWeek.stories.tsx | 159 +++++++++++++++++- .../src/components/timesheet/rows/rowWeek.tsx | 93 ++++++---- 2 files changed, 209 insertions(+), 43 deletions(-) diff --git a/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.stories.tsx b/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.stories.tsx index 6c8a57cf..c4ab36aa 100644 --- a/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.stories.tsx +++ b/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.stories.tsx @@ -18,10 +18,12 @@ export const Default: Story = { "Last Week": false, "Dec 15 - Dec 21, 2025": false, "Dec 8 - Dec 14, 2025": false, + "Dec 1 - Dec 7, 2025": false, }); return (
+

This Week = true

setCollapseds((prev) => ({ ...prev, - "Last Week": !prev["Last Week"], + "Dec 8 - Dec 14, 2025": !prev["Dec 8 - Dec 14, 2025"], })) } dates={[ @@ -64,7 +67,8 @@ export const Default: Story = { "Jan 4", ]} today="Jan 4" - status={"Approved"} + thisWeek={true} + status={"Approval Pending"} /> setCollapseds((prev) => ({ ...prev, - "Dec 8 - Dec 14, 2025": !prev["Dec 8 - Dec 14, 2025"], + "Last Week": !prev["Last Week"], + })) + } + dates={[ + "Dec 29", + "Dec 30", + "Dec 31", + "Jan 1", + "Jan 2", + "Jan 3", + "Jan 4", + ]} + today="Jan 4" + thisWeek={false} + status={"Approved"} + /> + + setCollapseds((prev) => ({ + ...prev, + "Dec 1 - Dec 7, 2025": !prev["Dec 1 - Dec 7, 2025"], })) } dates={[ @@ -108,8 +136,125 @@ export const Default: Story = { "Jan 4", ]} today="Jan 4" + thisWeek={false} + status={"None"} + /> +

This Week = false

+ + setCollapseds((prev) => ({ + ...prev, + "This Week": !prev["This Week"], + })) + } + dates={[ + "Dec 22", + "Dec 23", + "Dec 24", + "Dec 25", + "Dec 26", + "Dec 27", + "Jan 28", + ]} + thisWeek={false} + today="Jan 4" + status={"Not Submitted"} + /> + + setCollapseds((prev) => ({ + ...prev, + "Dec 8 - Dec 14, 2025": !prev["Dec 8 - Dec 14, 2025"], + })) + } + dates={[ + "Dec 22", + "Dec 23", + "Dec 24", + "Dec 25", + "Dec 26", + "Dec 27", + "Jan 28", + ]} + today="Jan 4" + thisWeek={false} status={"Approval Pending"} /> + + setCollapseds((prev) => ({ + ...prev, + "Dec 15 - Dec 21, 2025": !prev["Dec 15 - Dec 21, 2025"], + })) + } + dates={[ + "Dec 22", + "Dec 23", + "Dec 24", + "Dec 25", + "Dec 26", + "Dec 27", + "Jan 28", + ]} + today="Jan 4" + thisWeek={false} + status={"Rejected"} + /> + + setCollapseds((prev) => ({ + ...prev, + "Last Week": !prev["Last Week"], + })) + } + dates={[ + "Dec 22", + "Dec 23", + "Dec 24", + "Dec 25", + "Dec 26", + "Dec 27", + "Jan 28", + ]} + today="Jan 4" + thisWeek={false} + status={"Approved"} + /> + + setCollapseds((prev) => ({ + ...prev, + "Dec 1 - Dec 7, 2025": !prev["Dec 1 - Dec 7, 2025"], + })) + } + dates={[ + "Dec 22", + "Dec 23", + "Dec 24", + "Dec 25", + "Dec 26", + "Dec 27", + "Jan 28", + ]} + today="Jan 4" + thisWeek={false} + status={"None"} + />
); diff --git a/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.tsx b/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.tsx index d8a3c93b..74d0ad7e 100644 --- a/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.tsx +++ b/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.tsx @@ -20,7 +20,8 @@ type RowWeekStatus = | "Not Submitted" | "Approved" | "Rejected" - | "Approval Pending"; + | "Approval Pending" + | "None"; export interface RowWeekProps { label?: string; @@ -39,16 +40,10 @@ const statusTheme: Record = { Approved: "green", Rejected: "red", "Approval Pending": "orange", + None: "gray", }; -const statusLabel: Record = { - "Not Submitted": "Not Submitted", - Approved: "Approved", - Rejected: "Rejected", - "Approval Pending": "Approval Pending", -}; - -const StatusIcon: Record< +const statusIcon: Record< RowWeekStatus, { variant: ButtonVariant; icon: React.ReactNode } > = { @@ -58,15 +53,19 @@ const StatusIcon: Record< }, Approved: { variant: "ghost", - icon: , + icon: , }, Rejected: { variant: "ghost", - icon: , + icon: , }, "Approval Pending": { variant: "ghost", - icon: , + icon: , + }, + None: { + variant: "ghost", + icon: null, }, }; @@ -75,14 +74,16 @@ export const RowWeek: React.FC = ({ nesting = 0, collapsed = false, status = "Not Submitted", + thisWeek = false, dates, today = "", onToggle, totalHours = "", }) => { + const isStatusNone = status === "None"; return (
@@ -91,21 +92,21 @@ export const RowWeek: React.FC = ({ disabled={!onToggle} variant="ghost" className={cn( - "transition-transform bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent", + "border-none outline-none focus:ring-0 focus-visible:ring-0 transition-transform bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent", collapsed ? "-rotate-90" : "rotate-0" )} icon={() => } aria-label="Toggle week" /> {label} - {status && ( - {statusLabel[status]} + {status && status !== "None" && ( + {status} )}
{!collapsed && dates.map((date) => { const monthAndDay = date.split(" "); - const isToday = date === today; + const isToday = thisWeek && date === today; return (
= ({ ); })} -
- - {collapsed ? totalHours : "Total"} - -
+ {!(isStatusNone && collapsed) && ( +
+ + {collapsed ? totalHours : "Total"} + +
+ )}
From 7151c67ad84333a64369c9a9312af0aa939b3b76 Mon Sep 17 00:00:00 2001 From: Aditya Dhade Date: Wed, 25 Feb 2026 12:58:07 +0530 Subject: [PATCH 017/317] Use `cva` for handling variants --- .../src/components/timesheet/rows/rowWeek.tsx | 100 +++++++++++++----- 1 file changed, 73 insertions(+), 27 deletions(-) diff --git a/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.tsx b/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.tsx index 74d0ad7e..57e7ed5d 100644 --- a/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.tsx +++ b/packages/frappe-ui-react/src/components/timesheet/rows/rowWeek.tsx @@ -8,6 +8,7 @@ import { CircleX, Hourglass, } from "lucide-react"; +import { cva } from "class-variance-authority"; /** * Internal dependencies. @@ -69,6 +70,72 @@ const statusIcon: Record< }, }; +const totalHoursVariants = cva("", { + variants: { + status: { + "Not Submitted": "", + Approved: "", + Rejected: "", + "Approval Pending": "", + None: "", + }, + collapsed: { true: "", false: "" }, + thisWeek: { true: "", false: "" }, + }, + compoundVariants: [ + { + collapsed: true, + status: "Not Submitted", + class: "text-(--color-ink-green-4)", + }, + { + collapsed: true, + status: "Approved", + class: "text-(--color-ink-green-4)", + }, + { collapsed: true, status: "Rejected", class: "text-ink-red-4" }, + { + collapsed: true, + status: "Approval Pending", + class: "text-(--color-ink-green-4)", + }, + { collapsed: true, status: "None", class: "text-ink-gray-6" }, + { + collapsed: true, + status: "Approval Pending", + thisWeek: false, + class: "text-ink-red-4", + }, + ], + defaultVariants: { collapsed: false, thisWeek: true }, +}); + +const buttonVariants = cva("", { + variants: { + status: { + "Not Submitted": "text-ink-white", + Approved: "text-(--color-ink-green-4)", + Rejected: "text-ink-red-4", + "Approval Pending": "text-(--color-ink-amber-4)", + None: "", + }, + thisWeek: { true: "", false: "" }, + collapsed: { true: "", false: "" }, + }, + compoundVariants: [ + { + status: "Rejected", + thisWeek: false, + collapsed: false, + class: "text-ink-gray-5", + }, + ], + defaultVariants: { + thisWeek: true, + collapsed: false, + }, +}); + export const RowWeek: React.FC = ({ label = "This Week", nesting = 0, @@ -81,9 +148,10 @@ export const RowWeek: React.FC = ({ totalHours = "", }) => { const isStatusNone = status === "None"; + return (
@@ -129,22 +197,7 @@ export const RowWeek: React.FC = ({ {!(isStatusNone && collapsed) && (
- + {collapsed ? totalHours : "Total"}
@@ -153,17 +206,10 @@ export const RowWeek: React.FC = ({
{!isLast && (