glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: change hex colors to tailwind bariables #29

Merged
ilia merged 1 commits from chore/color-variables into main 2026-03-04 13:52:54 +00:00
Conversation 0 Commits 1 Files Changed 7 +18 -18
7 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte
View File

@@ -80,7 +80,7 @@ $effect(() => {
'transition-colors duration-150', 'transition-colors duration-150',
'hover:bg-white/50 dark:hover:bg-white/5', 'hover:bg-white/50 dark:hover:bg-white/5',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30',
isOpen && 'bg-white dark:bg-[#1e1e1e] border-black/5 dark:border-white/10 shadow-sm', isOpen && 'bg-paper dark:bg-dark-card border-black/5 dark:border-white/10 shadow-sm',
className, className,
)} )}
> >
@@ -96,7 +96,7 @@ $effect(() => {
sideOffset={8} sideOffset={8}
class={cn( class={cn(
'z-50 w-72', 'z-50 w-72',
'bg-[#f3f0e9] dark:bg-[#1e1e1e]', 'bg-surface dark:bg-dark-card',
'border border-black/5 dark:border-white/10', 'border border-black/5 dark:border-white/10',
'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.15)]', 'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.15)]',
'rounded-none p-4', 'rounded-none p-4',
@@ -112,9 +112,9 @@ $effect(() => {
<!-- Header --> <!-- Header -->
<div class="flex items-center justify-between mb-3 pb-3 border-b border-black/5 dark:border-white/10"> <div class="flex items-center justify-between mb-3 pb-3 border-b border-black/5 dark:border-white/10">
<div class="flex items-center gap-1.5"> <div class="flex items-center gap-1.5">
<Settings2Icon size={12} class="text-[#ff3b30]" /> <Settings2Icon size={12} class="text-swiss-red" />
<span <span
class="text-[0.5625rem] font-mono uppercase tracking-widest font-bold text-[#1a1a1a] dark:text-[#e5e5e5]" class="text-[0.5625rem] font-mono uppercase tracking-widest font-bold text-swiss-black dark:text-neutral-200"
> >
CONTROLS CONTROLS
</span> </span>
@@ -154,17 +154,17 @@ $effect(() => {
<div <div
class={cn( class={cn(
'flex items-center gap-1 md:gap-2 p-1.5 md:p-2', 'flex items-center gap-1 md:gap-2 p-1.5 md:p-2',
'bg-[#f3f0e9]/95 dark:bg-[#121212]/95 backdrop-blur-xl', 'bg-surface/95 dark:bg-dark-bg/95 backdrop-blur-xl',
'border border-black/5 dark:border-white/10', 'border border-black/5 dark:border-white/10',
'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.1)]', 'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.1)]',
'rounded-none ring-1 ring-black/5 dark:ring-white/5', 'rounded-none ring-1 ring-black/5 dark:ring-white/5',
)} )}
> >
<!-- Header: icon + label --> <!-- Header: icon + label -->
<div class="px-2 md:px-3 flex items-center gap-1.5 md:gap-2 border-r border-black/5 dark:border-white/10 mr-1 text-[#1a1a1a] dark:text-[#e5e5e5] shrink-0"> <div class="px-2 md:px-3 flex items-center gap-1.5 md:gap-2 border-r border-black/5 dark:border-white/10 mr-1 text-swiss-black dark:text-neutral-200 shrink-0">
<Settings2Icon <Settings2Icon
size={14} size={14}
class="text-[#ff3b30]" class="text-swiss-red"
/> />
<span <span
class="text-[0.5625rem] md:text-[0.625rem] font-mono uppercase tracking-widest font-bold hidden sm:inline whitespace-nowrap" class="text-[0.5625rem] md:text-[0.625rem] font-mono uppercase tracking-widest font-bold hidden sm:inline whitespace-nowrap"

6
src/shared/ui/Button/Button.svelte
View File

@@ -138,11 +138,11 @@ const variantStyles: Record<ButtonVariant, string> = {
'text-neutral-400 dark:text-neutral-400', 'text-neutral-400 dark:text-neutral-400',
'border border-transparent', 'border border-transparent',
// Hover (inactive) — semi-transparent lift, no bg-paper token // Hover (inactive) — semi-transparent lift, no bg-paper token
'hover:bg-white/50 dark:hover:bg-[#1e1e1e]/50', 'hover:bg-paper/50 dark:hover:bg-dark-card/50',
'hover:text-neutral-900 dark:hover:text-neutral-100', 'hover:text-neutral-900 dark:hover:text-neutral-100',
'hover:border-black/5 dark:hover:border-white/10', 'hover:border-black/5 dark:hover:border-white/10',
// Press // Press
'active:bg-white/70 dark:active:bg-[#1e1e1e]/70', 'active:bg-paper/70 dark:active:bg-dark-card/70',
// Disabled // Disabled
'disabled:text-neutral-300 dark:disabled:text-neutral-600', 'disabled:text-neutral-300 dark:disabled:text-neutral-600',
'disabled:cursor-not-allowed', 'disabled:cursor-not-allowed',
@@ -169,7 +169,7 @@ const iconSizeStyles: Record<ButtonSize, string> = {
const activeStyles: Partial<Record<ButtonVariant, string>> = { const activeStyles: Partial<Record<ButtonVariant, string>> = {
secondary: 'bg-paper dark:bg-paper shadow-sm border-black/20 dark:border-white/20', secondary: 'bg-paper dark:bg-paper shadow-sm border-black/20 dark:border-white/20',
tertiary: tertiary:
'bg-paper dark:bg-[#1e1e1e] border-black/10 dark:border-white/10 shadow-sm text-neutral-900 dark:text-neutral-100', 'bg-paper dark:bg-dark-card border-black/10 dark:border-white/10 shadow-sm text-neutral-900 dark:text-neutral-100',
ghost: 'bg-transparent dark:bg-transparent text-brand dark:text-brand', ghost: 'bg-transparent dark:bg-transparent text-brand dark:text-brand',
outline: 'bg-surface dark:bg-paper border-brand', outline: 'bg-surface dark:bg-paper border-brand',
icon: 'bg-paper dark:bg-paper text-brand border-black/5 dark:border-white/10', icon: 'bg-paper dark:bg-paper text-brand border-black/5 dark:border-white/10',

6
src/shared/ui/ComboControl/ComboControl.svelte
View File

@@ -129,8 +129,8 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
'border border-transparent', 'border border-transparent',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30',
open open
? 'bg-white dark:bg-[#1e1e1e] shadow-sm border-black/5 dark:border-white/10' ? 'bg-paper dark:bg-dark-card shadow-sm border-black/5 dark:border-white/10'
: 'hover:bg-white/50 dark:hover:bg-[#1e1e1e]/50', : 'hover:bg-paper/50 dark:hover:bg-dark-card/50',
)} )}
aria-label={controlLabel} aria-label={controlLabel}
> >
@@ -157,7 +157,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
<!-- Vertical slider popover --> <!-- Vertical slider popover -->
<PopoverContent <PopoverContent
class="w-auto py-4 px-3 h-64 flex items-center justify-center rounded-none border border-black/5 dark:border-white/10 shadow-sm bg-white dark:bg-[#1e1e1e]" class="w-auto py-4 px-3 h-64 flex items-center justify-center rounded-none border border-black/5 dark:border-white/10 shadow-sm bg-paper dark:bg-dark-card"
align="center" align="center"
side="top" side="top"
> >

2
src/shared/ui/Section/SectionTitle/SectionTitle.svelte
View File

@@ -13,7 +13,7 @@ interface Props {
const { text }: Props = $props(); const { text }: Props = $props();
</script> </script>
{#if text} {#if text}
<h2 class="text-3xl md:text-4xl lg:text-5xl font-['Space_Grotesk'] font-bold text-[#1a1a1a] dark:text-[#e5e5e5] tracking-tight"> <h2 class="text-3xl md:text-4xl lg:text-5xl font-['Space_Grotesk'] font-bold text-swiss-black dark:text-neutral-200 tracking-tight">
{text} {text}
</h2> </h2>
{/if} {/if}

2
src/shared/ui/SidebarContainer/SidebarContainer.svelte
View File

@@ -85,7 +85,7 @@ function close() {
'will-change-[width]', 'will-change-[width]',
'transition-[width] duration-300 ease-out', 'transition-[width] duration-300 ease-out',
'border-r border-black/5 dark:border-white/10', 'border-r border-black/5 dark:border-white/10',
'bg-[#f3f0e9] dark:bg-[#121212]', 'bg-surface dark:bg-dark-bg',
isOpen ? 'w-80 opacity-100' : 'w-0 opacity-0', isOpen ? 'w-80 opacity-100' : 'w-0 opacity-0',
'transition-[width,opacity] duration-300 ease-out', 'transition-[width,opacity] duration-300 ease-out',
className, className,

2
src/widgets/ComparisonView/ui/ComparisonView/ComparisonView.svelte
View File

@@ -37,7 +37,7 @@ $effect(() => {
<NavigationWrapper index={0} title="Comparison"> <NavigationWrapper index={0} title="Comparison">
{#snippet content(action)} {#snippet content(action)}
<div class="flex h-screen w-full overflow-hidden bg-[#f3f0e9] dark:bg-[#0a0a0a]"> <div class="flex h-screen w-full overflow-hidden bg-surface dark:bg-background">
<!-- Sidebar --> <!-- Sidebar -->
<SidebarContainer bind:isOpen={isSidebarOpen}> <SidebarContainer bind:isOpen={isSidebarOpen}>
{#snippet sidebar()} {#snippet sidebar()}

4
src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
View File

@@ -173,7 +173,7 @@ const scaleClass = $derived(
<div <div
class={cn( class={cn(
'w-full h-full flex flex-col items-center justify-center relative', 'w-full h-full flex flex-col items-center justify-center relative',
'bg-white dark:bg-[#1e1e1e]', 'bg-paper dark:bg-dark-card',
'shadow-2xl shadow-black/5 dark:shadow-black/20', 'shadow-2xl shadow-black/5 dark:shadow-black/20',
'transition-transform duration-300 ease-out', 'transition-transform duration-300 ease-out',
scaleClass, scaleClass,
@@ -181,7 +181,7 @@ const scaleClass = $derived(
> >
<!-- Subtle grid overlay — pointer-events-none, very low opacity --> <!-- Subtle grid overlay — pointer-events-none, very low opacity -->
<div <div
class="absolute inset-0 pointer-events-none opacity-[0.03] dark:opacity-[0.05] text-black dark:text-white" class="absolute inset-0 pointer-events-none opacity-[0.03] dark:opacity-[0.05] text-swiss-black dark:text-swiss-white"
style={gridStyle} style={gridStyle}
aria-hidden="true" aria-hidden="true"
> >