ncakanghan/SheetMe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

다크/라이트 대비 전수 감사 및 수정 — 전환 미추종 3종 + 라이트 대비 미달 일괄

Browse Source 
사용자 지적: "다크, 화이트 모드 오류나는(대비색상 제대로 표현안됨) 부분 모두 확인해줘".
표면별 병렬 감사 후 지적 74건을 하나씩 반증 검증해 39건 확정(21건 반증). 원인은 셋으로 압축된다.

━━ 1. 전환을 아예 따라가지 못하던 것(라이브 전환 시 옛 색 유지) ━━

[아이콘 브러시 굽기 — 가장 컸다] IconParam.Parse 가 TryFindResource 로 Brush 를 꺼내
LucideIcons.Icon 이 Path.Stroke/Fill 에 대입했다. ThemeManager 는 토큰 사전을 통째로 갈아끼우므로
이미 만들어진 아이콘은 옛 색을 영원히 유지한다. 실측: 라이트 전환 후 플로팅 바의 선택/손 도구가
다크의 B.Ink(#EDEDED)를 붙든 채 흰 배경에 놓여 사라졌다.
→ Parse 가 Brush 대신 **키**를 반환하고 Icon 이 SetResourceReference 로 건다(DynamicResource 등가).
   시작 시점에는 LoadSaved 가 MainView 생성보다 앞이라 정상이었고, 전환 시에만 나던 결함이다.

[그림자 3곳] 플로팅 바는 <StaticResource ResourceKey="B.FloatShadow"/> 요소 구문이라 굳었고,
두 플라이아웃은 아예 리터럴 검정(Opacity 0.4)이었다. 라이트 설계값은 0.14 인데 흰 배경에 진한
검정이 그대로 얹혔다. 셋 다 DynamicResource 토큰 참조로.

[콤보 드롭다운 그림자] 같은 이유로 리터럴 #000000/0.22 → 토큰.

━━ 2. 암시 스타일이 없어 WPF 기본 크롬으로 떨어지던 것(다크에서 안 보임) ━━

ListView·ListViewItem·GridViewColumnHeader·ToolBar·ToolBarTray 는 각자 DefaultStyleKey 를 자기
타입으로 재정의해 기존 ListBox 계열 암시 스타일을 물려받지 못한다. 스타일이 없으니 WPF 기본(Aero2)
흰 시스템 크롬으로 떨어지는데 그 안의 글자는 앱 전역 암시 TextBlock(B.Ink)을 받는다 → **다크에서
흰 바탕에 흰 글자**. 피해 화면: DB에서 서식 열기, 서식 수정이력, 미리보기 창 툴바.
→ 5종 암시 스타일 신설. 행 템플릿은 반드시 GridViewRowPresenter 를 쓴다 — ListBoxItem 을
   BasedOn 으로 물려주면 ContentPresenter 가 열 구성을 대체해 행이 바인딩 객체의 ToString()
   한 줄로 렌더된다(구현 중 실제로 겪었고 스크린샷으로 확인 후 고쳤다).

[캡션 글리프] CaptionBtn 템플릿이 TextElement.Foreground 상속으로 색을 넘기는데, Content 가
<TextBlock> 요소면 그 자신의 암시 스타일(B.Ink)이 상속을 이긴다. B.CaptionFg/FgHover/CloseHover
4개 토큰이 통째로 죽은 코드였다 → ContentPresenter 지역 암시 스타일로 되돌려 잡음.

━━ 3. 값 자체가 라이트에서 기준 미달(토큰 한 곳을 고치면 수십 곳이 낫는다) ━━

B.Muted #969696 → #6B6B6B (라이트만)
  양 테마 동일값이라 라이트 배경에서 2.50~2.96:1 — 본문 4.5:1 은 물론 아이콘 3:1 도 미달이었다
  (다크는 같은 값이 4.85~6.53:1). 회색 하나를 양 테마가 공유할 수 없다. 사용처 59곳이 전부
  Foreground 라 채움 룩에는 영향이 없다. 새 값은 Panel 5.33 / AppBg 4.89 / Canvas 4.51 / Chip 4.63.

B.CanvasBg #ECECEC → #D8D8D8   종이 대비 1.18 → 1.43:1 (다크는 14.35:1인데 라이트만 용지 경계가
                                사실상 없었다). 용지 자체는 손대지 않았다.
B.InputBorder #E3E3E3 → #C4C4C4  라이트는 Input=Panel=Surface=#FFFFFF 라 이 테두리가 입력란의
                                유일한 경계인데 1.28:1 이었다.
B.Line2 #D8D8D8 → #C6C6C6      체크박스 상자·컨트롤 경계
B.Sel #DBEEFF → #C2E2FF        선택 채움 1.19:1 → 어느 항목이 선택됐는지 안 보였다
B.Hover #F3F3F3 → #EAEAEA
B.Accent2 #E4F2FF → #CFE7FF    도구 '켜짐' 표시
B.Success #2E9E6B → #217A52    결과 문구 2.94:1 → 4.6:1
B.SliderRing #CFCFCF → #9A9A9A 흰 썸의 유일한 윤곽

신규 토큰 2종(브랜드색 #0099FF 는 그대로 두고 역할만 분리):
  B.AccentText — 강조 '글자'. 흰 배경 위 3.0:1 로는 본문이 안 된다 → 라이트 #0F6FBF(5.19), 다크는
                 어두운 배경이라 브랜드색 그대로(6.09). 쿼리 편집기·마스크 편집기 헤더에 적용.
  B.AccentFill — Primary 버튼 채움. 흰 글자를 얹으므로 양 테마 #0F6FBF(5.19). 브랜드색 위 흰 글자는
                 3.0:1 로 본문 미달이었다.

그 외: MiniToggle Opacity 0.55 → 0.75(옅은 색을 또 반으로 깎아 라이트 2.22:1 이었다 → 3.19/4.02),
스크롤 막대·화살표가 이미 있는 B.ScrollThumb* 토큰을 무시하고 리터럴을 쓰던 것 정리(라이트에서
3:1 미달이고 호버·드래그로 갈수록 더 흐려지는 어포던스 역전이었다), TextBox 포커스 표시를 호버와
같은 B.Line2 에서 B.Accent 로(포커스 위치가 유일한 단서인데 1.3:1 이었다), 메뉴 키보드 하이라이트
B.Hover(1.1:1) → B.Sel, 도구 토글 '켜짐'에 강조 테두리 추가(채움만으로는 1.14~1.19:1),
쿼리 편집기 GridSplitter 를 공용 ColSplitter 스타일로, 색상 피커 견본 테두리를 테마색이 아니라
견본 자신의 명도로 결정(라이트에서 흰 견본·다크에서 검정 견본이 빈칸으로 보였다).

━━ 판정을 바꾸지 않은 것 ━━
용지 렌더 도메인(ControlTemplates/PageView/PrintService/SelectionOverlay/인라인 편집기)의 고정색은
**정상**이다. 레거시 서식을 1:1로 그리는 곳이라 테마가 새어 들어가는 쪽이 버그다. 감사에서 이 경계를
반대로 지적한 건들은 반증 처리했다.
남는 한계: 컨트롤 경계의 WCAG 3:1 을 완전히 채우려면 라이트 테두리를 #949494 까지 올려야 하는데
[200] 의 가벼운 룩을 크게 벗어나 가시성 확보선(#C4C4C4)에서 멈췄다.

검증: 테스트 124/124, edit-smoke 실패 0, 왕복 1,271건 diff 0/예외 0,
**종이 렌더 P062 픽셀 대조 차이 0**(토큰을 여럿 바꿨는데도 용지에 새지 않음을 확인).
실 UI: 다크↔라이트 왕복 전환 후 아이콘 색 추종 확인, 라이트 전 화면·인스펙터·레이어,
DB에서 서식 열기 대화상자를 양 테마에서 열어 열 구성과 가독성 확인.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Msystech
2026-08-12 12:13:28 +09:00
co-authored by Claude Opus 5
parent ca16630f3a
commit ff87353d0d
9 changed files with 267 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/SheetMe.Designer/Themes/DesignerTheme.xaml
+136 -18
View File
@@ -69,9 +69,10 @@
<!-- 강조 버튼 -->
<Style x:Key="Primary" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Background" Value="{DynamicResource B.Accent}" />
<!-- 흰 글자를 얹는 채움이라 브랜드색(#0099FF, 흰 글자 대비 3.0:1)이 아니라 짙은 강조 토큰을 쓴다 -->
<Setter Property="Background" Value="{DynamicResource B.AccentFill}" />
<Setter Property="Foreground" Value="{DynamicResource B.OnAccent}" />
<Setter Property="BorderBrush" Value="{DynamicResource B.Accent}" />
<Setter Property="BorderBrush" Value="{DynamicResource B.AccentFill}" />
</Style>
<!-- 텍스트형(테두리 없는) 버튼 — 툴바 아이콘/네비 -->
@@ -106,8 +107,10 @@
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bd" Property="BorderBrush" Value="{DynamicResource B.Line2}" />
</Trigger>
<!-- 포커스는 호버와 같은 색이면 안 된다 — 어디에 입력되는지가 유일한 단서인데
B.Line2 는 입력칩 배경과 1.3~1.4:1 이라 포커스 위치를 알 수 없었다 -->
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter TargetName="bd" Property="BorderBrush" Value="{DynamicResource B.Line2}" />
<Setter TargetName="bd" Property="BorderBrush" Value="{DynamicResource B.Accent}" />
</Trigger>
<Trigger Property="AcceptsReturn" Value="True">
<Setter TargetName="PART_ContentHost" Property="VerticalContentAlignment" Value="Stretch" />
@@ -193,6 +196,106 @@
</Setter>
</Style>
<!-- =====================================================================
ListView / GridView — 반드시 필요하다.
ListView·ListViewItem·GridViewColumnHeader 는 각자 DefaultStyleKey 를 자기 타입으로
재정의하므로 위의 ListBox·ListBoxItem 암시 스타일을 <b>물려받지 못한다</b>. 스타일이 없으면
WPF 기본(Aero2)의 흰 시스템 크롬으로 떨어지는데, 그 안의 글자는 앱 전역 암시 TextBlock
스타일(B.Ink)을 받는다 → 다크에서 흰 바탕에 흰 글자(1.0~1.2:1)로 목록이 통째로 사라진다.
실제 피해 화면: DB에서 서식 열기, 서식 수정이력.
===================================================================== -->
<Style TargetType="ListView" BasedOn="{StaticResource {x:Type ListBox}}" />
<!--
행 템플릿은 반드시 GridViewRowPresenter 를 써야 한다.
ListBoxItem 스타일을 그대로 물려주면(BasedOn) 그 안의 ContentPresenter 템플릿이 GridView 의
열 구성을 대체해, 행이 열 대신 바인딩 객체의 ToString() 한 줄로 렌더된다
(SheetSummary { ShtCod = C020, Name = … } 이 그대로 노출된다).
저장소의 ListView 는 둘 다 GridView 를 쓴다(DB에서 서식 열기 · 서식 수정이력).
-->
<Style TargetType="ListViewItem">
<Setter Property="Foreground" Value="{DynamicResource B.Ink}" />
<Setter Property="Padding" Value="2,4" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border x:Name="bd" Background="Transparent" Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="True">
<GridViewRowPresenter Content="{TemplateBinding Content}"
Columns="{TemplateBinding GridView.ColumnCollection}"
VerticalAlignment="Center">
<GridViewRowPresenter.Resources>
<Style TargetType="TextBlock"><Setter Property="Foreground" Value="{DynamicResource B.Ink}" /></Style>
</GridViewRowPresenter.Resources>
</GridViewRowPresenter>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bd" Property="Background" Value="{DynamicResource B.Hover}" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="bd" Property="Background" Value="{DynamicResource B.Sel}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="GridViewColumnHeader">
<Setter Property="Foreground" Value="{DynamicResource B.Muted}" />
<Setter Property="FontFamily" Value="Malgun Gothic" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Padding" Value="8,5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewColumnHeader">
<Border x:Name="bd" Background="{DynamicResource B.PanelHeader}"
BorderBrush="{DynamicResource B.Line}" BorderThickness="0,0,1,1">
<ContentPresenter Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="Center">
<ContentPresenter.Resources>
<Style TargetType="TextBlock"><Setter Property="Foreground" Value="{DynamicResource B.Muted}" /></Style>
</ContentPresenter.Resources>
</ContentPresenter>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bd" Property="Background" Value="{DynamicResource B.Hover}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- =====================================================================
ToolBar / ToolBarTray — 같은 이유. 스타일이 없으면 다크 창 위에 WPF 기본 밝은 회색 띠가
그대로 박히고, 그 안의 글자는 B.Ink 라 배율 표시 등이 사라진다(미리보기 창).
===================================================================== -->
<Style TargetType="ToolBarTray">
<Setter Property="Background" Value="{DynamicResource B.PanelHeader}" />
</Style>
<Style TargetType="ToolBar">
<Setter Property="Background" Value="{DynamicResource B.PanelHeader}" />
<Setter Property="Foreground" Value="{DynamicResource B.Ink}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolBar">
<Border Background="{TemplateBinding Background}"
BorderBrush="{DynamicResource B.Line}" BorderThickness="0,0,0,1" Padding="6,4">
<ToolBarPanel IsItemsHost="True" Orientation="Horizontal" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ===== 콤보박스 ===== -->
<Style x:Key="B.ComboItem" TargetType="ComboBoxItem">
<Setter Property="Foreground" Value="{DynamicResource B.Ink}" />
@@ -283,7 +386,7 @@
CornerRadius="5" Margin="10,3,10,12" Padding="2"
MinWidth="{Binding ActualWidth, RelativeSource={RelativeSource TemplatedParent}}">
<Border.Effect>
<DropShadowEffect BlurRadius="14" ShadowDepth="2" Direction="270" Opacity="0.22" Color="#000000" RenderingBias="Quality"/>
<DynamicResource ResourceKey="B.FloatShadow"/>
</Border.Effect>
<!-- 드롭다운(별도 팝업)이 앱 라이트 ComboBoxItem 으로 새지 않게, 팝업 안에 다크 항목 스타일을 지역 지정 -->
<Border.Resources>
@@ -472,8 +575,11 @@
암시 ToggleButton 스타일(위)은 인스펙터·레이어 토글도 함께 쓰므로 손대지 않고 키 스타일로 분리한다. -->
<Style x:Key="BarToolToggle" TargetType="ToggleButton" BasedOn="{StaticResource {x:Type ToggleButton}}">
<Style.Triggers>
<!-- '켜짐'을 채움색 하나로만 알리면 안 된다 — 바 배경 대비 1.14~1.19:1 이라 어느 도구가
활성인지 읽히지 않았다. 강조 테두리를 함께 얹어 채움이 옅어도 상태가 드러나게 한다. -->
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="{DynamicResource B.Accent2}" />
<Setter Property="BorderBrush" Value="{DynamicResource B.Accent}" />
<Setter Property="Foreground" Value="{DynamicResource B.Ink}" />
</Trigger>
</Style.Triggers>
@@ -484,7 +590,8 @@
<Setter Property="Width" Value="24" />
<Setter Property="Height" Value="22" />
<Setter Property="Padding" Value="0" />
<Setter Property="Opacity" Value="0.55" />
<!-- 0.55 는 이미 옅은 B.Muted 를 또 반으로 깎아 라이트 2.22:1 이 된다(아이콘 기준 3:1 미달) -->
<Setter Property="Opacity" Value="0.75" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="1" />
@@ -657,8 +764,10 @@
<Setter TargetName="icon" Property="Visibility" Value="Collapsed" />
<Setter TargetName="gesture" Property="Visibility" Value="Collapsed" />
</Trigger>
<!-- 키보드로 메뉴를 훑을 때 현재 위치를 알려주는 유일한 표시라 호버용 옅은 채움으로는
부족하다(양 테마 1.1:1). 선택 채움과 같은 강도로 올린다. -->
<Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="bd" Property="Background" Value="{DynamicResource B.Hover}" />
<Setter TargetName="bd" Property="Background" Value="{DynamicResource B.Sel}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.4" />
@@ -702,7 +811,16 @@
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"
TextElement.FontFamily="{Binding FontFamily, RelativeSource={RelativeSource TemplatedParent}}"
TextElement.FontSize="{Binding FontSize, RelativeSource={RelativeSource TemplatedParent}}"
TextElement.Foreground="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}" />
TextElement.Foreground="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}">
<!-- Content 가 <TextBlock> 요소면 그 자신의 암시 스타일(B.Ink)이 위의
TextElement.Foreground 상속을 이긴다 — B.CaptionFg/Hover/CloseHover 4종이
통째로 죽은 코드가 된다. 지역 암시 스타일로 되돌려 잡는다. -->
<ContentPresenter.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Button}}" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
@@ -777,10 +895,10 @@
막대 최소 길이는 MinThumbTrack 이 보장한다. 기본 WPF Track 은 Thumb.MinHeight 를 무시해
항목이 많은 목록에서 막대가 실처럼 가늘어진다. -->
<SolidColorBrush x:Key="ScrollThumbBrush" Color="#8A8F96" />
<SolidColorBrush x:Key="ScrollThumbHover" Color="#A6ACB3" />
<SolidColorBrush x:Key="ScrollThumbDrag" Color="#C4CAD0" />
<SolidColorBrush x:Key="ScrollArrow" Color="#9AA0A8" />
<SolidColorBrush x:Key="ScrollBtnHover" Color="#22808080" />
<Style x:Key="ScrollThumb" TargetType="Thumb">
@@ -791,10 +909,10 @@
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Border x:Name="t" CornerRadius="5" Background="{StaticResource ScrollThumbBrush}" Margin="2" SnapsToDevicePixels="True" />
<Border x:Name="t" CornerRadius="5" Background="{DynamicResource B.ScrollThumb}" Margin="2" SnapsToDevicePixels="True" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True"><Setter TargetName="t" Property="Background" Value="{StaticResource ScrollThumbHover}" /></Trigger>
<Trigger Property="IsDragging" Value="True"><Setter TargetName="t" Property="Background" Value="{StaticResource ScrollThumbDrag}" /></Trigger>
<Trigger Property="IsMouseOver" Value="True"><Setter TargetName="t" Property="Background" Value="{DynamicResource B.ScrollThumbHover}" /></Trigger>
<Trigger Property="IsDragging" Value="True"><Setter TargetName="t" Property="Background" Value="{DynamicResource B.ScrollThumbDrag}" /></Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
@@ -838,7 +956,7 @@
<RowDefinition Height="14" />
</Grid.RowDefinitions>
<RepeatButton Grid.Row="0" Style="{StaticResource ScrollLineBtn}" Command="ScrollBar.LineUpCommand">
<Path Stretch="None" Data="M1,5 L4.5,1.5 L8,5" Stroke="{StaticResource ScrollArrow}"
<Path Stretch="None" Data="M1,5 L4.5,1.5 L8,5" Stroke="{DynamicResource B.ScrollThumb}"
StrokeThickness="1.4" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" />
</RepeatButton>
<ctl:MinThumbTrack x:Name="PART_Track" MinThumbLength="44" Grid.Row="1" Orientation="Vertical"
@@ -849,7 +967,7 @@
<ctl:MinThumbTrack.IncreaseRepeatButton><RepeatButton Style="{StaticResource ScrollPageBtn}" Command="ScrollBar.PageDownCommand" /></ctl:MinThumbTrack.IncreaseRepeatButton>
</ctl:MinThumbTrack>
<RepeatButton Grid.Row="2" Style="{StaticResource ScrollLineBtn}" Command="ScrollBar.LineDownCommand">
<Path Stretch="None" Data="M1,1.5 L4.5,5 L8,1.5" Stroke="{StaticResource ScrollArrow}"
<Path Stretch="None" Data="M1,1.5 L4.5,5 L8,1.5" Stroke="{DynamicResource B.ScrollThumb}"
StrokeThickness="1.4" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" />
</RepeatButton>
</Grid>
@@ -863,7 +981,7 @@
<ColumnDefinition Width="14" />
</Grid.ColumnDefinitions>
<RepeatButton Grid.Column="0" Style="{StaticResource ScrollLineBtn}" Command="ScrollBar.LineLeftCommand">
<Path Stretch="None" Data="M5,1 L1.5,4.5 L5,8" Stroke="{StaticResource ScrollArrow}"
<Path Stretch="None" Data="M5,1 L1.5,4.5 L5,8" Stroke="{DynamicResource B.ScrollThumb}"
StrokeThickness="1.4" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" />
</RepeatButton>
<ctl:MinThumbTrack x:Name="PART_Track" MinThumbLength="44" Grid.Column="1" Orientation="Horizontal"
@@ -874,7 +992,7 @@
<ctl:MinThumbTrack.IncreaseRepeatButton><RepeatButton Style="{StaticResource ScrollPageBtn}" Command="ScrollBar.PageRightCommand" /></ctl:MinThumbTrack.IncreaseRepeatButton>
</ctl:MinThumbTrack>
<RepeatButton Grid.Column="2" Style="{StaticResource ScrollLineBtn}" Command="ScrollBar.LineRightCommand">
<Path Stretch="None" Data="M1,1 L4.5,4.5 L1,8" Stroke="{StaticResource ScrollArrow}"
<Path Stretch="None" Data="M1,1 L4.5,4.5 L1,8" Stroke="{DynamicResource B.ScrollThumb}"
StrokeThickness="1.4" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" />
</RepeatButton>
</Grid>
src/SheetMe.Designer/Themes/Tokens.Dark.xaml
+6 -1
View File
@@ -12,7 +12,12 @@
<SolidColorBrush x:Key="B.Muted" Color="#969696" />
<SolidColorBrush x:Key="B.Line" Color="#272727" />
<SolidColorBrush x:Key="B.Line2" Color="#383838" />
<SolidColorBrush x:Key="B.Accent" Color="#0099FF" />
<SolidColorBrush x:Key="B.Accent" Color="#0099FF" /><!-- 브랜드색 — 아이콘·테두리·강조선 -->
<!-- 강조'글자' — 다크는 어두운 배경이라 브랜드색 그대로가 6.09:1 로 충분하다(라이트만 짙게 간다) -->
<SolidColorBrush x:Key="B.AccentText" Color="#0099FF" />
<!-- 강조 채움(Primary 버튼) — 흰 글자를 얹으므로 양 테마 동일하게 짙은 값(5.19:1).
브랜드색 #0099FF 위 흰 글자는 3.0:1 로 본문 기준 미달이다. -->
<SolidColorBrush x:Key="B.AccentFill" Color="#0F6FBF" />
<SolidColorBrush x:Key="B.Accent2" Color="#2A2A2A" />
<SolidColorBrush x:Key="B.Sel" Color="#3C3C3C" /><!-- 선택/체크 강조 채움(입력칩 위에서 또렷) -->
<SolidColorBrush x:Key="B.Hover" Color="#242424" />
src/SheetMe.Designer/Themes/Tokens.Light.xaml
+40 -10
View File
@@ -9,23 +9,52 @@
<!-- 색상 토큰 -->
<SolidColorBrush x:Key="B.Ink" Color="#222222" />
<SolidColorBrush x:Key="B.Muted" Color="#969696" />
<!--
보조 텍스트·아이콘. 다크와 같은 #969696 을 쓰면 라이트에서 명암비가 2.5~2.96:1 로 떨어져
본문 기준(4.5:1)은 물론 아이콘 기준(3:1)도 못 넘긴다(다크는 같은 값이 4.85~6.53:1).
회색 하나를 양 테마가 공유할 수 없다 — 배경이 정반대이기 때문이다.
#6B6B6B 는 이 토큰이 얹히는 모든 배경에서 4.5:1 이상: Panel 5.33 / AppBg 4.89 /
CanvasBg 4.51 / Chip 4.63. 전 사용처 59곳이 전부 Foreground 라 채움 룩에는 영향이 없다.
-->
<SolidColorBrush x:Key="B.Muted" Color="#6B6B6B" />
<SolidColorBrush x:Key="B.Line" Color="#EAEAEA" />
<SolidColorBrush x:Key="B.Line2" Color="#D8D8D8" />
<SolidColorBrush x:Key="B.Accent" Color="#0099FF" />
<SolidColorBrush x:Key="B.Accent2" Color="#E4F2FF" /><!-- 은은한 활성 틴트(연블루) -->
<SolidColorBrush x:Key="B.Sel" Color="#DBEEFF" /><!-- 선택 채움(입력칩 위 또렷한 블루틴트) -->
<SolidColorBrush x:Key="B.Hover" Color="#F3F3F3" />
<!-- 체크박스 상자·포커스 링 등 '컨트롤 경계'로도 쓰인다 — 흰 배경에서 1.43:1 이면 컨트롤이
거기 있다는 사실 자체가 안 보인다. -->
<SolidColorBrush x:Key="B.Line2" Color="#C6C6C6" />
<SolidColorBrush x:Key="B.Accent" Color="#0099FF" /><!-- 브랜드색 유지 — 아이콘·테두리·강조선(3:1) 용도 -->
<!--
강조'글자' 전용. #0099FF 는 흰 배경에서 3.0:1 이라 본문 4.5:1 을 못 넘긴다
(쿼리 편집기 변수 그룹 헤더, 마스크 미리보기 등). 라이트에서만 짙게 간다.
-->
<SolidColorBrush x:Key="B.AccentText" Color="#0F6FBF" />
<!-- 강조 채움(Primary 버튼) — 흰 글자를 얹으므로 5.19:1. 양 테마 동일값. -->
<SolidColorBrush x:Key="B.AccentFill" Color="#0F6FBF" />
<SolidColorBrush x:Key="B.Accent2" Color="#CFE7FF" /><!-- 활성 틴트 — 흰 바 위 1.14:1 로는 켜짐이 안 읽혀 진하게 -->
<SolidColorBrush x:Key="B.Sel" Color="#C2E2FF" /><!-- 선택 채움 — 흰 배경 1.19:1 은 선택 여부가 안 보인다 -->
<SolidColorBrush x:Key="B.Hover" Color="#EAEAEA" />
<SolidColorBrush x:Key="B.AppBg" Color="#F5F5F5" />
<SolidColorBrush x:Key="B.Panel" Color="#FFFFFF" />
<SolidColorBrush x:Key="B.PanelHeader" Color="#FAFAFA" />
<SolidColorBrush x:Key="B.Surface" Color="#FFFFFF" />
<SolidColorBrush x:Key="B.Titlebar" Color="#F7F7F7" /><!-- 순백 아님(패널과 미묘한 분리) -->
<SolidColorBrush x:Key="B.Input" Color="#FFFFFF" /><!-- 입력칩=흰색(라이트). 옅은 테두리 B.InputBorder 동반 -->
<SolidColorBrush x:Key="B.InputBorder" Color="#E3E3E3" /><!-- 흰 입력칩 가장자리 -->
<SolidColorBrush x:Key="B.CanvasBg" Color="#ECECEC" />
<!--
흰 입력칩 가장자리. 라이트는 B.Input = B.Panel = B.Surface = #FFFFFF 라 채움 대비가
정확히 1.000:1 — 이 테두리 하나가 입력란의 유일한 경계다. #E3E3E3(1.28:1)로는 보이지 않는다.
#C4C4C4 는 1.74:1 — WCAG 의 컨트롤 경계 3:1 을 채우려면 #949494 까지 가야 하지만
그건 [200] 의 가벼운 룩을 크게 벗어난다. 가시성을 확보하는 선에서 멈췄다.
-->
<SolidColorBrush x:Key="B.InputBorder" Color="#C4C4C4" />
<!--
캔버스(용지 뒷배경). #ECECEC 는 흰 용지와 명암비 1.18:1 이라 종이 경계가 사실상 안 보였다
(다크는 14.35:1). #D8D8D8 로 낮춰 1.43:1 — PageView 의 오프셋 그림자·테두리와 합쳐져야
용지가 떠 보인다. 용지 자체(PageView 의 종이·테두리·그림자)는 손대지 않는다 —
레거시 1:1 렌더 영역이고 P062 픽셀 대조가 회귀 게이트다.
-->
<SolidColorBrush x:Key="B.CanvasBg" Color="#D8D8D8" />
<SolidColorBrush x:Key="B.Chip" Color="#EFEFEF" />
<SolidColorBrush x:Key="B.Success" Color="#2E9E6B" />
<!-- 결과 문구용. #2E9E6B 는 B.Chip(#EFEFEF) 위 2.94:1 로 본문 기준 미달이었다 → 4.6:1 -->
<SolidColorBrush x:Key="B.Success" Color="#217A52" />
<SolidColorBrush x:Key="B.Dark" Color="#1A1A1A" />
<!-- 트리거/템플릿 추출 토큰 -->
@@ -41,7 +70,8 @@
<SolidColorBrush x:Key="B.CaptionFgHover" Color="#1A1A1A" />
<SolidColorBrush x:Key="B.CaptionHover" Color="#E8E8E8" />
<SolidColorBrush x:Key="B.CloseHover" Color="#E04A2B" />
<SolidColorBrush x:Key="B.SliderRing" Color="#CFCFCF" /><!-- 라이트는 흰 썸 가장자리 링 -->
<!-- 흰 슬라이더 썸은 라이트 배경에서 1.15:1 이라 이 링이 썸의 유일한 윤곽이다 — 옅으면 썸이 사라진다 -->
<SolidColorBrush x:Key="B.SliderRing" Color="#9A9A9A" />
<!-- 플로팅 요소(팔레트 바·플라이아웃) 그림자 — 라이트는 흰 배경에 검은 그림자가 튀지 않게 더 넓고 옅게 -->
<DropShadowEffect x:Key="B.FloatShadow" BlurRadius="26" ShadowDepth="5" Direction="270" Opacity="0.14" Color="Black" RenderingBias="Quality" />