From e8dacef374554993467684e3e6d38b2f8171ad76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= Date: Sat, 5 Apr 2025 18:38:30 +0400 Subject: [PATCH] Add new colors and wip use them all instead of tailwind ones MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Émile Ré --- apps/console/package.json | 5 +- apps/console/public/index.html | 4 +- apps/console/src/App.css | 246 +++++++++++++++--- apps/console/src/components/EditableField.tsx | 2 +- apps/console/src/components/NavMain.tsx | 4 - .../src/components/NavMainSkeleton.tsx | 10 +- apps/console/src/components/NavUser.tsx | 12 +- .../src/components/NavUserSkeleton.tsx | 10 +- .../src/components/OrganizationSwitcher.tsx | 25 +- .../OrganizationSwitcherSkeleton.tsx | 10 +- apps/console/src/components/PageHeader.tsx | 11 +- apps/console/src/components/PolicyEditor.css | 20 +- apps/console/src/components/ui/avatar.tsx | 2 +- apps/console/src/components/ui/badge.tsx | 18 +- apps/console/src/components/ui/breadcrumb.tsx | 6 +- apps/console/src/components/ui/button.tsx | 18 +- apps/console/src/components/ui/card.tsx | 7 +- apps/console/src/components/ui/checkbox.tsx | 4 +- apps/console/src/components/ui/command.tsx | 17 +- apps/console/src/components/ui/dialog.tsx | 16 +- .../src/components/ui/dropdown-menu.tsx | 28 +- apps/console/src/components/ui/input.tsx | 6 +- apps/console/src/components/ui/popover.tsx | 2 +- .../console/src/components/ui/radio-group.tsx | 4 +- apps/console/src/components/ui/select.tsx | 14 +- apps/console/src/components/ui/separator.tsx | 8 +- apps/console/src/components/ui/sheet.tsx | 16 +- apps/console/src/components/ui/sidebar.tsx | 47 ++-- apps/console/src/components/ui/table.tsx | 8 +- apps/console/src/components/ui/tabs.tsx | 6 +- apps/console/src/components/ui/textarea.tsx | 4 +- apps/console/src/components/ui/toast.tsx | 16 +- apps/console/src/components/ui/tooltip.tsx | 4 +- apps/console/src/layouts/AuthLayout.tsx | 4 +- apps/console/src/pages/ErrorPage.tsx | 8 +- .../pages/authentication/ConfirmEmailPage.tsx | 4 +- .../authentication/ConfirmInvitationPage.tsx | 4 +- .../authentication/ForgotPasswordPage.tsx | 2 +- .../src/pages/authentication/LoginPage.tsx | 2 +- .../src/pages/authentication/RegisterPage.tsx | 4 +- .../authentication/ResetPasswordPage.tsx | 4 +- .../organizations/CreateOrganizationPage.tsx | 2 +- .../organizations/CreateOrganizationView.tsx | 4 +- .../organizations/NoOrganizationLayout.tsx | 4 +- .../organizations/OrganizationBreadcrumb.tsx | 4 +- .../src/pages/organizations/SettingsPage.tsx | 5 +- .../src/pages/organizations/SettingsView.tsx | 20 +- .../frameworks/EditFrameworkPage.tsx | 2 +- .../frameworks/EditFrameworkView.tsx | 2 +- .../frameworks/FrameworkLayout.tsx | 12 +- .../frameworks/FrameworkLayoutView.tsx | 2 +- .../FrameworkLayoutView/ControlList.tsx | 18 +- .../frameworks/FrameworkListPage.tsx | 14 +- .../frameworks/FrameworkListView.tsx | 10 +- .../frameworks/FrameworkPage.tsx | 8 +- .../frameworks/NewFrameworkPage.tsx | 2 +- .../frameworks/NewFrameworkView.tsx | 2 +- .../frameworks/controls/Control.tsx | 62 ++--- .../frameworks/controls/ControlPage.tsx | 8 +- .../mitigations/EditMitigationPage.tsx | 2 +- .../mitigations/EditMitigationView.tsx | 12 +- .../mitigations/MitigationListPage.tsx | 20 +- .../mitigations/MitigationListView.tsx | 38 +-- .../mitigations/MitigationPage.tsx | 10 +- .../mitigations/MitigationView.tsx | 170 ++++++------ .../mitigations/NewMitigationPage.tsx | 2 +- .../mitigations/NewMitigationView.tsx | 6 +- .../organizations/people/NewPeoplePage.tsx | 2 +- .../organizations/people/NewPeopleView.tsx | 18 +- .../organizations/people/PeopleListPage.tsx | 12 +- .../organizations/people/PeopleListView.tsx | 22 +- .../pages/organizations/people/PeoplePage.tsx | 9 +- .../pages/organizations/people/PeopleView.tsx | 14 +- .../organizations/policies/EditPolicyPage.tsx | 2 +- .../organizations/policies/NewPolicyPage.tsx | 2 +- .../organizations/policies/PolicyListPage.tsx | 32 +-- .../organizations/policies/PolicyListView.tsx | 28 +- .../organizations/policies/PolicyPage.tsx | 64 ++--- .../organizations/policies/PolicyView.tsx | 44 ++-- .../pages/organizations/risks/NewRiskPage.tsx | 2 +- .../pages/organizations/risks/NewRiskView.tsx | 2 +- .../organizations/risks/RiskListPage.tsx | 5 +- .../organizations/risks/RiskListView.tsx | 18 +- .../organizations/risks/ShowRiskPage.tsx | 2 +- .../organizations/risks/ShowRiskView.tsx | 20 +- .../organizations/vendors/VendorListPage.tsx | 10 +- .../organizations/vendors/VendorListView.tsx | 26 +- .../organizations/vendors/VendorPage.tsx | 2 +- .../organizations/vendors/VendorView.tsx | 40 +-- apps/console/src/styles/colors.css | 168 ------------ apps/console/src/styles/policy-content.css | 18 +- package-lock.json | 7 + 92 files changed, 833 insertions(+), 819 deletions(-) delete mode 100644 apps/console/src/styles/colors.css diff --git a/apps/console/package.json b/apps/console/package.json index 19dcafc72..23e52c2e2 100644 --- a/apps/console/package.json +++ b/apps/console/package.json @@ -12,6 +12,8 @@ }, "dependencies": { "@lexical/react": "^0.27.0", + "@probo/react-lazy": "^0.1.0", + "@radix-ui/colors": "^3.0.0", "@radix-ui/react-avatar": "^1.1.3", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-collapsible": "^1.1.3", @@ -44,8 +46,7 @@ "react-router": "^7.1.5", "relay-runtime": "^18.2.0", "tailwind-merge": "^3.0.2", - "tailwindcss-animate": "^1.0.7", - "@probo/react-lazy": "^0.1.0" + "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@babel/core": "^7.26.7", diff --git a/apps/console/public/index.html b/apps/console/public/index.html index 8adeabff5..3b206be67 100644 --- a/apps/console/public/index.html +++ b/apps/console/public/index.html @@ -1,4 +1,4 @@ - + @@ -42,7 +42,7 @@ - +
diff --git a/apps/console/src/App.css b/apps/console/src/App.css index 06f04ff63..4a85765fe 100644 --- a/apps/console/src/App.css +++ b/apps/console/src/App.css @@ -1,5 +1,18 @@ @import "tailwindcss"; -@import "./styles/colors.css"; +@import "@radix-ui/colors/blue.css"; +@import "@radix-ui/colors/blue-dark.css"; +@import "@radix-ui/colors/olive.css"; +@import "@radix-ui/colors/olive-alpha.css"; +@import "@radix-ui/colors/olive-dark.css"; +@import "@radix-ui/colors/olive-dark-alpha.css"; +@import "@radix-ui/colors/lime.css"; +@import "@radix-ui/colors/lime-dark.css"; +@import "@radix-ui/colors/red.css"; +@import "@radix-ui/colors/red-dark.css"; +@import "@radix-ui/colors/red-dark-alpha.css"; +@import "@radix-ui/colors/orange.css"; +@import "@radix-ui/colors/orange-dark.css"; + @import "./styles/policy-content.css"; @plugin 'tailwindcss-animate'; @@ -8,41 +21,107 @@ @custom-variant dark (&:is(.dark *)); @theme { - --color-border: hsl(var(--border)); - --color-input: hsl(var(--input)); - --color-ring: hsl(var(--ring)); - --color-background: hsl(var(--background)); - --color-foreground: hsl(var(--foreground)); + /* Legacy */ + /* --color-border: hsl(var(--border)); -> solid-b + --color-input: hsl(var(--input)); -> solid-b + --color-ring: hsl(var(--ring)); -> active-b + --color-background: hsl(var(--background)); -> level-0 + --color-foreground: hsl(var(--foreground)); -> primary - --color-primary: hsl(var(--primary)); - --color-primary-foreground: hsl(var(--primary-foreground)); + --color-primary: hsl(var(--primary)); -> primary + --color-primary-foreground: hsl(var(--primary-foreground)); -> invert - --color-secondary: hsl(var(--secondary)); - --color-secondary-foreground: hsl(var(--secondary-foreground)); + --color-secondary: hsl(var(--secondary)); -> invert + --color-secondary-foreground: hsl(var(--secondary-foreground)); -> secondary - --color-destructive: hsl(var(--destructive)); - --color-destructive-foreground: hsl(var(--destructive-foreground)); + --color-destructive: hsl(var(--destructive)); -> danger-bg + --color-destructive-foreground: hsl(var(--destructive-foreground)); -> danger - --color-muted: hsl(var(--muted)); - --color-muted-foreground: hsl(var(--muted-foreground)); + --color-muted: hsl(var(--muted)); -> invert-bg + --color-muted-foreground: hsl(var(--muted-foreground)); -> tertiary - --color-accent: hsl(var(--accent)); - --color-accent-foreground: hsl(var(--accent-foreground)); + --color-accent: hsl(var(--accent)); -> accent-bg + --color-accent-foreground: hsl(var(--accent-foreground)); -> accent - --color-popover: hsl(var(--popover)); - --color-popover-foreground: hsl(var(--popover-foreground)); + --color-popover: hsl(var(--popover)); -> level-0 + --color-popover-foreground: hsl(var(--popover-foreground)); -> primary - --color-card: hsl(var(--card)); - --color-card-foreground: hsl(var(--card-foreground)); + --color-card: hsl(var(--card)); -> level-0 + --color-card-foreground: hsl(var(--card-foreground)); -> primary - --color-sidebar: hsl(var(--sidebar-background)); - --color-sidebar-foreground: hsl(var(--sidebar-foreground)); - --color-sidebar-primary: hsl(var(--sidebar-primary)); + --color-sidebar: hsl(var(--sidebar-background)); -> level-0 + --color-sidebar-foreground: hsl(var(--sidebar-foreground)); -> secondary + --color-sidebar-primary: hsl(var(--sidebar-primary)); -> not used --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground)); --color-sidebar-accent: hsl(var(--sidebar-accent)); --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground)); - --color-sidebar-border: hsl(var(--sidebar-border)); - --color-sidebar-ring: hsl(var(--sidebar-ring)); + --color-sidebar-border: hsl(var(--sidebar-border)); -> solid-b + --color-sidebar-ring: hsl(var(--sidebar-ring)); -> active-b */ + + /* New */ + /* Surfaces */ + --color-level-0: var(--level-0); + --color-level-1: var(--level-1); + --color-level-2: var(--level-2); + --color-level-3: var(--level-3); + + /* Text colors */ + --color-primary: var(--primary); + --color-invert: var(--invert); + --color-secondary: var(--secondary); + --color-tertiary: var(--tertiary); + --color-quaternary: var(--quaternary); + --color-disabled: var(--disabled); + --color-accent: var(--accent); + --color-danger: var(--danger); + --color-success: var(--success); + --color-info: var(--info); + --color-warning: var(--warning); + + /* Background colors */ + --color-primary-bg: var(--primary-bg); + --color-invert-bg: var(--invert-bg); + --color-secondary-bg: var(--secondary-bg); + --color-tertiary-bg: var(--tertiary-bg); + --color-subtle-bg: var(--subtle-bg); + --color-highlight-bg: var(--highlight-bg); + --color-accent-bg: var(--accent-bg); + --color-active-bg: var(--active-bg); + --color-danger-bg: var(--danger-bg); + --color-danger-plain-bg: var(--danger-plain-bg); + --color-success-bg: var(--success-bg); + --color-info-bg: var(--info-bg); + --color-warning-bg: var(--warning-bg); + /* Hover */ + --color-h-primary-bg: var(--h-primary-bg); + --color-h-invert-bg: var(--h-invert-bg); + --color-h-secondary-bg: var(--h-secondary-bg); + --color-h-tertiary-bg: var(--h-tertiary-bg); + --color-h-subtle-bg: var(--h-subtle-bg); + --color-h-highlight-bg: var(--h-highlight-bg); + --color-h-accent-bg: var(--h-accent-bg); + --color-h-active-bg: var(--h-active-bg); + /* Pressed */ + --color-p-primary-bg: var(--p-primary-bg); + --color-p-invert-bg: var(--p-invert-bg); + --color-p-secondary-bg: var(--p-secondary-bg); + --color-p-tertiary-bg: var(--p-tertiary-bg); + --color-p-subtle-bg: var(--p-subtle-bg); + --color-p-highlight-bg: var(--p-highlight-bg); + --color-p-accent-bg: var(--p-accent-bg); + --color-p-active-bg: var(--p-active-bg); + + /* Borders */ + --color-solid-b: var(--solid-b); + --color-low-b: var(--low-b); + --color-mid-b: var(--mid-b); + --color-strong-b: var(--strong-b); + --color-active-b: var(--active-b); + --color-accent-b: var(--accent-b); + --color-danger-b: var(--danger-b); + --color-success-b: var(--success-b); + --color-warning-b: var(--warning-b); + --color-info-b: var(--info-b); } /* @@ -59,12 +138,13 @@ ::before, ::backdrop, ::file-selector-button { - border-color: var(--color-gray-200, currentColor); + border-color: var(--color-mid-b, currentColor); } } @layer base { - :root { + /* Legacy */ + /* :root { --background: 0 0% 100%; --foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; @@ -122,14 +202,122 @@ --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; + } */ + + /* New */ + :root { + /* Surfaces */ + --level-0: #FAFAF5; + --level-1: #FFFFFF; + --level-2: #FFFFFF; + --level-3: var(--olive-12); + + /* Text colors */ + --primary: var(--olive-12); + --invert: var(--olive-1); + --secondary: var(--olive-11); + --tertiary: var(--olive-10); + --quaternary: var(--olive-8); + --disabled: var(--olive-7); + --accent: var(--lime-10); + --danger: var(--red-11); + --success: var(--lime-11); + --info: var(--blue-11); + --warning: var(--orange-11); + + /* Background colors */ + --primary-bg: var(--olive-12); + --invert-bg: #ffffff; + --secondary-bg: var(--olive-1); + --tertiary-bg: transparent; + --subtle-bg: var(--olive-a2); + --highlight-bg: var(--olive-a3); + --accent-bg: var(--olive-12); + --active-bg: var(--lime-4); + --danger-bg: var(--red-3); + --danger-plain-bg: var(--red-10); + --success-bg: var(--lime-3); + --info-bg: var(--blue-3); + --warning-bg: var(--orange-3); + /* Hover */ + --h-primary-bg: #273025; + --h-invert-bg: var(--olive-2); + --h-secondary-bg: var(--olive-2); + --h-tertiary-bg: var(--olive-a2); + --h-subtle-bg: var(--olive-a3); + --h-highlight-bg: var(--olive-a4); + --h-accent-bg: #1E2C1C; + --h-active-bg: var(--lime-5); + /* Pressed */ + --p-primary-bg: #30392E; + --p-invert-bg: var(--olive-3); + --p-secondary-bg: var(--olive-3); + --p-tertiary-bg: var(--olive-a3); + --p-subtle-bg: var(--olive-a4); + --p-highlight-bg: var(--olive-a5); + --p-accent-bg: #293A25; + --p-active-bg: var(--lime-6); + + /* Borders */ + --solid-b: var(--olive-4); + --low-b: var(--olive-a4); + --mid-b: var(--olive-a7); + --strong-b: var(--olive-a8); + --active-b: var(--olive-12); + --accent-b: var(--lime-11); + --danger-b: var(--red-10); + --success-b: var(--lime-10); + --warning-b: var(--orange-10); + --info-b: var(--blue-10); + } + + .dark { + /* Surfaces */ + --level-0: var(--olive-1); + --level-1: var(--olive-2); + --level-2: var(--olive-3); + --level-3: var(--olive-7); + + /* Text colors */ + --success: var(--lime-a11); + + /* Background colors */ + --primary-bg: var(--lime-10); + --invert-bg: var(--olive-1); + --secondary-bg: var(--olive-a3); + --active-bg: var(--olive-a4); + --accent-bg: var(--lime-10); + --danger-bg: var(--red-a3); + --danger-plain-bg: var(--red-a10); + --success-bg: var(--lime-a3); + --info-bg: var(--blue-a3); + --warning-bg: var(--orange-a3); + /* Hover */ + --h-primary-bg: #C4F042E1; + --h-secondary-bg: var(--olive-a3); + --h-highlight-bg: var(--olive-a5); + --h-accent-bg: var(--lime-a9); + --h-active-bg: var(--olive-a5); + /* Pressed */ + --p-primary-bg: #C4F042D7; + --p-secondary-bg: var(--olive-a4); + --p-highlight-bg: var(--olive-a6); + --p-accent-bg: var(--lime-a10); + --p-active-bg: var(--olive-a6); + + /* Borders */ + --solid-b: var(--olive-5); + --mid-b: var(--olive-a5); + --active-b: var(--olive-a12); + --warning-b: var(--orange-a10); } } @layer base { * { - @apply border-border; + @apply border-solid-b; } body { - @apply font-sans antialiased bg-background text-foreground; + @apply font-sans antialiased bg-level-0 text-primary; } } diff --git a/apps/console/src/components/EditableField.tsx b/apps/console/src/components/EditableField.tsx index 963c5b0a1..529b6baa4 100644 --- a/apps/console/src/components/EditableField.tsx +++ b/apps/console/src/components/EditableField.tsx @@ -30,7 +30,7 @@ export function EditableField({ {helpText && (
- + {helpText}
)} diff --git a/apps/console/src/components/NavMain.tsx b/apps/console/src/components/NavMain.tsx index 0390f0cd4..8af0ffa47 100644 --- a/apps/console/src/components/NavMain.tsx +++ b/apps/console/src/components/NavMain.tsx @@ -15,7 +15,6 @@ import { } from "@/components/ui/collapsible"; import { SidebarGroup, - SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, @@ -63,9 +62,6 @@ export function NavMain() { return ( - - Compliance - {items.map((item) => { const active = isItemActive(item) || item.isActive; diff --git a/apps/console/src/components/NavMainSkeleton.tsx b/apps/console/src/components/NavMainSkeleton.tsx index c80b302f3..a813b64ca 100644 --- a/apps/console/src/components/NavMainSkeleton.tsx +++ b/apps/console/src/components/NavMainSkeleton.tsx @@ -13,7 +13,7 @@ export function NavMainSkeleton() {
-
+
@@ -21,7 +21,7 @@ export function NavMainSkeleton() {
-
+
@@ -29,7 +29,7 @@ export function NavMainSkeleton() {
-
+
@@ -37,7 +37,7 @@ export function NavMainSkeleton() {
-
+
@@ -45,7 +45,7 @@ export function NavMainSkeleton() {
-
+
diff --git a/apps/console/src/components/NavUser.tsx b/apps/console/src/components/NavUser.tsx index 653da9958..22f964662 100644 --- a/apps/console/src/components/NavUser.tsx +++ b/apps/console/src/components/NavUser.tsx @@ -49,13 +49,9 @@ export function NavUser({ viewer }: { viewer: NavUser_viewer$key }) { - + - + {currentUser.fullName.substring(0, 2).toUpperCase()} @@ -63,7 +59,7 @@ export function NavUser({ viewer }: { viewer: NavUser_viewer$key }) { {currentUser.fullName} - + {currentUser.email}
@@ -78,7 +74,7 @@ export function NavUser({ viewer }: { viewer: NavUser_viewer$key }) { >
- + {currentUser.fullName.substring(0, 2).toUpperCase()} diff --git a/apps/console/src/components/NavUserSkeleton.tsx b/apps/console/src/components/NavUserSkeleton.tsx index de6fc349c..2f0b64e52 100644 --- a/apps/console/src/components/NavUserSkeleton.tsx +++ b/apps/console/src/components/NavUserSkeleton.tsx @@ -14,14 +14,14 @@ export function NavUserSkeleton() { isActive disabled size="lg" - className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground animate-pulse" + className="data-[state=open]:bg-accent data-[state=open]:text-accent animate-pulse" > -
+
-
-
+
+
-
+
diff --git a/apps/console/src/components/OrganizationSwitcher.tsx b/apps/console/src/components/OrganizationSwitcher.tsx index f7c278058..e332b5f9f 100644 --- a/apps/console/src/components/OrganizationSwitcher.tsx +++ b/apps/console/src/components/OrganizationSwitcher.tsx @@ -101,27 +101,28 @@ export function OrganizationSwitcher({ -
+
{currentOrganization ? ( ) : ( -
+
)}
-
+
{currentOrganization ? ( <> - + {currentOrganization.name} ) : ( - + Select Organization )} @@ -135,7 +136,7 @@ export function OrganizationSwitcher({ side={isMobile ? "bottom" : "right"} sideOffset={4} > - + Organizations {hasOrganizations && @@ -144,10 +145,10 @@ export function OrganizationSwitcher({ key={edge.node.id} onClick={() => handleOrganizationSwitch(edge.node)} className={`gap-2 p-2 ${ - edge.node.id === organizationId ? "bg-muted" : "" + edge.node.id === organizationId ? "bg-subtle-bg" : "" }`} > -
+
-
+
-
+
Add organization
diff --git a/apps/console/src/components/OrganizationSwitcherSkeleton.tsx b/apps/console/src/components/OrganizationSwitcherSkeleton.tsx index 3a06b5107..642192ae1 100644 --- a/apps/console/src/components/OrganizationSwitcherSkeleton.tsx +++ b/apps/console/src/components/OrganizationSwitcherSkeleton.tsx @@ -12,18 +12,18 @@ export function OrganizationSwitcherSkeleton() { -
+
-
+
-
+
-
+
diff --git a/apps/console/src/components/PageHeader.tsx b/apps/console/src/components/PageHeader.tsx index 1557b218d..7aed24b1c 100644 --- a/apps/console/src/components/PageHeader.tsx +++ b/apps/console/src/components/PageHeader.tsx @@ -57,7 +57,7 @@ export function PageHeading({ const PageHeadingSkeleton: FC = () => { return (
-
+
); }; @@ -70,12 +70,7 @@ export function PageDescription({ children: ReactNode; }) { return ( -
+
{children}
); @@ -84,7 +79,7 @@ export function PageDescription({ export function PageDescriptionSkeleton() { return (
-
+
); } diff --git a/apps/console/src/components/PolicyEditor.css b/apps/console/src/components/PolicyEditor.css index 14d5d4c17..788f0c182 100644 --- a/apps/console/src/components/PolicyEditor.css +++ b/apps/console/src/components/PolicyEditor.css @@ -4,13 +4,13 @@ line-height: 1.5; font-weight: 400; margin-top: 0.5rem; - border: 1px solid hsl(var(--border)); + border: 1px solid var(--solid-b); display: block; width: 100%; } .policy-editor { - background: #fff; + background: var(--bg-invert-bg); position: relative; border-radius: 0.5rem; display: flex; @@ -63,8 +63,8 @@ display: flex; flex-wrap: wrap; padding: 8px; - border-bottom: 1px solid hsl(var(--border)); - background-color: hsl(var(--muted)); + border-bottom: 1px solid hsl(var(--solid-b)); + background-color: hsl(var(--invert-bg)); border-radius: 0.5rem 0.5rem 0 0; } @@ -90,7 +90,7 @@ .policy-editor .toolbar .divider { width: 1px; - background-color: hsl(var(--border)); + background-color: hsl(var(--solid-b)); margin: 0 8px; height: 24px; } @@ -130,8 +130,8 @@ margin: 0; margin-left: 20px; padding-left: 16px; - border-left: 4px solid hsl(var(--border)); - color: hsl(var(--muted-foreground)); + border-left: 4px solid hsl(var(--solid-b)); + color: hsl(var(--tertiary)); } .editor-list-ol { @@ -174,7 +174,7 @@ } .editor-text-code { - background-color: hsl(var(--muted)); + background-color: hsl(var(--invert-bg)); padding: 1px 4px; border-radius: 4px; font-family: monospace; @@ -186,7 +186,7 @@ } .editor-code { - background-color: hsl(var(--muted)); + background-color: hsl(var(--invert-bg)); font-family: monospace; display: block; padding: 8px 16px; @@ -227,4 +227,4 @@ .editor-tokenFunction { color: #dd4a68; -} \ No newline at end of file +} \ No newline at end of file diff --git a/apps/console/src/components/ui/avatar.tsx b/apps/console/src/components/ui/avatar.tsx index fda1c3d56..bddc620a8 100644 --- a/apps/console/src/components/ui/avatar.tsx +++ b/apps/console/src/components/ui/avatar.tsx @@ -37,7 +37,7 @@ const AvatarFallback = React.forwardRef< )); @@ -80,7 +80,7 @@ const BreadcrumbSeparator = ({