zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

style(ui): replace dark mode opacity-based colors with explicit hex values

Browse Source
This commit is contained in:
Hyko
2026-04-22 17:10:53 -04:00
parent bc63618190
commit 0e9f70094d
6 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/Breadcrumb.js
+2 -2
View File
@@ -6,7 +6,7 @@ const Breadcrumb = ({ items = [], className = '' }) => {
return (
<nav
aria-label="Breadcrumb"
className={`inline-flex self-start bg-white dark:bg-neutral-800/30 border border-neutral-200 dark:border-neutral-700/30 rounded-xl overflow-hidden ${className}`}
className={`inline-flex self-start bg-white dark:bg-[#0B0B0B] border border-neutral-200 dark:border-[#1B1B1B] rounded-xl overflow-hidden ${className}`}
>
<ol className="flex items-center">
{items.map((item, index) => (
@@ -25,7 +25,7 @@ const Breadcrumb = ({ items = [], className = '' }) => {
item.active
? 'text-black dark:text-white cursor-default'
: item.onClick
? 'text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700/20 cursor-pointer'
? 'text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-950 cursor-pointer'
: 'text-neutral-400 cursor-default',
].filter(Boolean).join(' ')}
>
src/shared/components/Card.js
+3 -3
View File
@@ -19,7 +19,7 @@ const Card = ({
const isLightDark = variant === 'lightDark';
const variants = {
default: 'rounded-xl bg-white dark:bg-neutral-800/30 border-neutral-200 dark:border-neutral-700/30',
default: 'rounded-xl bg-white dark:bg-[#0B0B0B] border-neutral-200 dark:border-[#1B1B1B]',
elevated: 'rounded-xl bg-neutral-50/80 dark:bg-neutral-900/40 border-neutral-200 dark:border-neutral-800/50',
outline: 'rounded-xl bg-transparent border-neutral-300 dark:border-neutral-700/50',
solid: 'rounded-xl bg-neutral-100 dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700',
@@ -56,8 +56,8 @@ const Card = ({
lg: 'flex flex-col gap-6'
};
const headerBorderClass = 'border-neutral-200 dark:border-neutral-700/30';
const footerBorderClass = 'border-neutral-200 dark:border-neutral-700/30';
const headerBorderClass = 'border-neutral-200 dark:border-[#1B1B1B]';
const footerBorderClass = 'border-neutral-200 dark:border-[#1B1B1B]';
const titleClass = 'text-sm font-medium text-neutral-900 dark:text-white';
const subtitleClass = 'text-xs text-neutral-500 dark:text-neutral-400 mt-1';
src/shared/components/FilterTabs.js
+3 -3
View File
@@ -4,17 +4,17 @@ import React from 'react';
const FilterTabs = ({ tabs = [], value, onChange, className = ''}) => {
return (
<div className={`inline-flex self-start border border-neutral-200 dark:border-neutral-700/30 rounded-xl overflow-hidden ${className}`}>
<div className={`inline-flex self-start border border-neutral-200 dark:border-[#1B1B1B] rounded-xl overflow-hidden ${className}`}>
{tabs.map((tab, index) => (
<button
key={tab.key}
onClick={() => onChange(tab.key)}
className={[
'px-3 py-1.5 text-xs font-medium transition-colors cursor-pointer',
index !== 0 ? 'border-l border-neutral-200 dark:border-neutral-700/30' : '',
index !== 0 ? 'border-l border-neutral-200 dark:border-[#1B1B1B]' : '',
value === tab.key
? 'bg-neutral-100 dark:bg-neutral-700/40 text-neutral-900 dark:text-white'
: 'bg-white dark:bg-neutral-800/30 text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700/20',
: 'bg-white dark:bg-[#0B0B0B] text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-950',
].filter(Boolean).join(' ')}
>
{tab.label}
src/shared/components/LoadingState.js
+7 -7
View File
@@ -30,7 +30,7 @@ export const LoadingSpinner = ({
const colors = {
white: 'border-neutral-300 dark:border-white/20 border-t-neutral-600 dark:border-t-white',
neutral: 'border-neutral-300 dark:border-neutral-700/30 border-t-neutral-500 dark:border-t-neutral-400',
neutral: 'border-neutral-300 dark:border-[#1B1B1B] border-t-neutral-500 dark:border-t-neutral-400',
primary: 'border-blue-500/20 border-t-blue-500'
};
@@ -53,11 +53,11 @@ export const PageLoading = ({ message = 'Loading...' }) => (
// Table skeleton
export const TableSkeleton = ({ rows = 5, columns = 4 }) => (
<div className="bg-neutral-100/80 dark:bg-neutral-800/30 border border-neutral-200 dark:border-neutral-700/30 rounded-xl overflow-hidden">
<div className="bg-neutral-100/80 dark:bg-[#0B0B0B] border border-neutral-200 dark:border-[#1B1B1B] rounded-xl overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b border-neutral-200 dark:border-neutral-700/30">
<tr className="border-b border-neutral-200 dark:border-[#1B1B1B]">
{Array.from({ length: columns }).map((_, index) => (
<th key={index} className="px-6 py-4 text-left">
<Skeleton height="h-4" width="60%" />
@@ -67,7 +67,7 @@ export const TableSkeleton = ({ rows = 5, columns = 4 }) => (
</thead>
<tbody className="divide-y divide-neutral-200 dark:divide-neutral-700/30">
{Array.from({ length: rows }).map((_, rowIndex) => (
<tr key={rowIndex} className="hover:bg-neutral-50 dark:hover:bg-neutral-700/20 transition-colors">
<tr key={rowIndex} className="hover:bg-neutral-50 dark:hover:bg-neutral-950 transition-colors">
{Array.from({ length: columns }).map((_, colIndex) => (
<td key={colIndex} className="px-6 py-4 whitespace-nowrap">
<Skeleton height="h-4" width={`${60 + Math.random() * 30}%`} />
@@ -87,9 +87,9 @@ export const CardSkeleton = ({
lines = 3,
hasFooter = false
}) => (
<div className="bg-neutral-100/80 dark:bg-neutral-800/30 border border-neutral-200 dark:border-neutral-700/30 rounded-xl p-6">
<div className="bg-neutral-100/80 dark:bg-[#0B0B0B] border border-neutral-200 dark:border-[#1B1B1B] rounded-xl p-6">
{hasHeader && (
<div className="border-b border-neutral-200 dark:border-neutral-700/30 pb-4 mb-6">
<div className="border-b border-neutral-200 dark:border-[#1B1B1B] pb-4 mb-6">
<Skeleton height="h-5" width="40%" className="mb-2" />
<Skeleton height="h-3" width="60%" />
</div>
@@ -106,7 +106,7 @@ export const CardSkeleton = ({
</div>
{hasFooter && (
<div className="border-t border-neutral-200 dark:border-neutral-700/30 pt-4 mt-6">
<div className="border-t border-neutral-200 dark:border-[#1B1B1B] pt-4 mt-6">
<Skeleton height="h-8" width="30%" />
</div>
)}
src/shared/components/Modal.js
+2 -2
View File
@@ -73,7 +73,7 @@ const Modal = ({
<Dialog.Panel
className={`
w-full ${sizeClasses[size]}
bg-white dark:bg-neutral-900
bg-white dark:bg-[#0B0B0B]
border border-neutral-200 dark:border-neutral-800
rounded-lg
shadow-xl
@@ -109,7 +109,7 @@ const Modal = ({
{/* Footer */}
{resolvedFooter && (
<div className="px-4 py-3 border-t border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/30">
<div className="px-4 py-3 border-t border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-[#0B0B0B]">
{resolvedFooter}
</div>
)}
src/shared/components/Table.js
+8 -7
View File
@@ -60,7 +60,7 @@ const Table = ({
);
const SkeletonRow = () => (
<tr className="hover:bg-neutral-100 dark:hover:bg-neutral-700/20 transition-colors">
<tr className="hover:bg-neutral-100 dark:hover:bg-neutral-950 transition-colors">
{columns.map((column, index) => (
<td key={index} className={`${sizeClasses.cell} ${column.noWrap !== false ? '' : 'whitespace-nowrap'}`}>
{column.skeleton ? (
@@ -176,7 +176,7 @@ const Table = ({
const to = Math.min(currentPage * limit, total);
const PaginationBar = () => (
<div className="px-4 py-3 border-t border-neutral-200 dark:border-neutral-700/30">
<div className="px-4 py-3 border-t border-neutral-200 dark:border-[#1B1B1B]">
<div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-2 shrink-0">
{loading ? (
@@ -268,7 +268,7 @@ const Table = ({
<div className="hidden lg:block overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b border-neutral-200 dark:border-neutral-700/30">
<tr className="border-b border-neutral-200 dark:border-[#1B1B1B]">
{columns.map((column) => (
<th
key={column.key}
@@ -292,16 +292,17 @@ const Table = ({
<EmptyState />
) : (
data.map((item, index) => {
const isLast = index === data.length - 1;
const { className: extraClassName, ...rowExtraProps } = getRowProps ? getRowProps(item) : {};
return (
<tr
key={item.id || index}
className={`hover:bg-neutral-100 dark:hover:bg-neutral-700/20 transition-colors ${onRowClick ? 'cursor-pointer' : ''} ${extraClassName || ''}`}
className={`hover:bg-neutral-50 dark:hover:bg-neutral-950 transition-colors ${onRowClick ? 'cursor-pointer' : ''} ${extraClassName || ''}`}
onClick={onRowClick ? () => onRowClick(item) : undefined}
{...rowExtraProps}
>
{columns.map((column) => (
<td key={column.key} className={`${sizeClasses.cell} ${column.noWrap !== false ? '' : 'whitespace-nowrap'}`}>
{columns.map((column, colIdx) => (
<td key={column.key} className={`${sizeClasses.cell} ${column.noWrap !== false ? '' : 'whitespace-nowrap'} ${isLast && colIdx === 0 ? 'rounded-bl-xl' : ''} ${isLast && colIdx === columns.length - 1 ? 'rounded-br-xl' : ''}`}>
{renderCellContent(item, column)}
</td>
))}
@@ -331,7 +332,7 @@ const Table = ({
return (
<div
key={item.id || index}
className={`${onRowClick ? 'cursor-pointer' : ''} ${extraClassName || ''}`}
className={`${onRowClick ? 'cursor-pointer' : ''} ${extraClassName || ''} ${index === data.length - 1 ? 'rounded-b-xl' : ''}`}
onClick={onRowClick ? () => onRowClick(item) : undefined}
{...rowExtraProps}
>