From 90d89e5c2f4d65e0b0e98ac72467214a1fbb5ba1 Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Thu, 22 Jan 2026 21:30:42 +0200 Subject: [PATCH] New theming tokens for comp analyzer --- .../components/DamageComboBar.module.css | 122 +++++++++--------- .../components/RangeVisualization.module.css | 36 +++--- .../components/RangeVisualization.tsx | 14 +- .../components/SelectedWeapons.module.css | 34 ++--- .../components/WeaponCategories.module.css | 18 +-- .../components/WeaponGrid.module.css | 20 +-- 6 files changed, 122 insertions(+), 122 deletions(-) diff --git a/app/features/comp-analyzer/components/DamageComboBar.module.css b/app/features/comp-analyzer/components/DamageComboBar.module.css index 59a9e6cb0..bd49071d6 100644 --- a/app/features/comp-analyzer/components/DamageComboBar.module.css +++ b/app/features/comp-analyzer/components/DamageComboBar.module.css @@ -1,9 +1,9 @@ .container { display: flex; flex-direction: column; - border: 1px solid var(--border); - border-radius: var(--rounded-sm); - background: var(--bg); + border: 1px solid var(--color-border); + border-radius: var(--radius-field); + background: var(--color-bg); } .header { @@ -11,19 +11,19 @@ align-items: center; justify-content: space-between; padding: var(--s-2) var(--s-3); - background: var(--bg-lighter); + background: var(--color-bg-higher); border: none; - border-radius: var(--rounded-sm); + border-radius: var(--radius-field); cursor: pointer; - font-size: var(--fonts-sm); - font-weight: var(--semi-bold); - color: var(--text); + font-size: var(--font-sm); + font-weight: var(--weight-semi); + color: var(--color-text); width: 100%; text-align: left; } .header:hover { - background: var(--bg-lightest); + background: var(--color-bg-high); } .headerTitle { @@ -31,9 +31,9 @@ } .collapseIcon { - font-size: var(--fonts-lg); - font-weight: var(--bold); - color: var(--text-lighter); + font-size: var(--font-lg); + font-weight: var(--weight-bold); + color: var(--color-text-high); width: 20px; text-align: center; } @@ -55,8 +55,8 @@ position: relative; display: flex; flex: 1; - background-color: var(--bg-lightest); - border-radius: var(--rounded-xs); + background-color: var(--color-bg-high); + border-radius: var(--radius-selector); overflow: hidden; } @@ -73,13 +73,13 @@ gap: var(--s-1); height: 36px; padding: 0 var(--s-2); - color: var(--black-text); - font-weight: var(--semi-bold); + color: var(--color-text-inverse); + font-weight: var(--weight-semi); } .damageTypeLabel { - font-size: var(--fonts-xxxs); - color: var(--text-lighter); + font-size: var(--font-2xs); + color: var(--color-text-high); text-align: center; white-space: nowrap; overflow: hidden; @@ -87,7 +87,7 @@ padding: var(--s-0-5) var(--s-0-5); background: none; border: 1px solid transparent; - border-radius: var(--rounded-xs); + border-radius: var(--radius-selector); cursor: pointer; } @@ -96,13 +96,13 @@ } .damageValue { - font-size: var(--fonts-sm); - font-weight: var(--bold); + font-size: var(--font-sm); + font-weight: var(--weight-bold); } .hitMultiplier { - font-size: var(--fonts-xxs); - font-weight: var(--semi-bold); + font-size: var(--font-2xs); + font-weight: var(--weight-semi); opacity: 0.8; margin-left: var(--s-0-5); } @@ -158,36 +158,36 @@ } .totalDamage { - font-size: var(--fonts-xl); - font-weight: var(--bold); + font-size: var(--font-xl); + font-weight: var(--weight-bold); } .hitCount { - font-size: var(--fonts-sm); - color: var(--text-lighter); + font-size: var(--font-sm); + color: var(--color-text-high); } .filterControlsRow { display: flex; gap: var(--s-2); padding-block-end: var(--s-2); - border-block-end: 1px solid var(--border); + border-block-end: 1px solid var(--color-border); margin-block-end: var(--s-1); } .filterControlButton { padding: var(--s-1) var(--s-2); - background: var(--bg-lighter); - border: 1px solid var(--border); - border-radius: var(--rounded-sm); - font-size: var(--fonts-xs); - color: var(--text); + background: var(--color-bg-higher); + border: 1px solid var(--color-border); + border-radius: var(--radius-field); + font-size: var(--font-xs); + color: var(--color-text); cursor: pointer; transition: background-color 0.15s ease; } .filterControlButton:hover:not(:disabled) { - background: var(--bg-lightest); + background: var(--color-bg-high); } .filterControlButton:disabled { @@ -200,7 +200,7 @@ flex-wrap: wrap; gap: var(--s-2); padding-bottom: var(--s-2); - border-bottom: 1px solid var(--border); + border-bottom: 1px solid var(--color-border); margin-bottom: var(--s-1); } @@ -209,17 +209,17 @@ align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); - background: var(--bg-lighter); - border: 1px solid var(--border); - border-radius: var(--rounded-sm); - font-size: var(--fonts-xs); - color: var(--text-lighter); + background: var(--color-bg-higher); + border: 1px solid var(--color-border); + border-radius: var(--radius-field); + font-size: var(--font-xs); + color: var(--color-text-high); cursor: pointer; transition: background-color 0.15s ease; } .filteredItem:hover { - background: var(--bg-lightest); + background: var(--color-bg-high); } .slidersContainer { @@ -228,7 +228,7 @@ gap: var(--s-2) var(--s-2); align-items: center; padding-bottom: var(--s-3); - border-bottom: 1px solid var(--border); + border-bottom: 1px solid var(--color-border); margin-bottom: var(--s-1); } @@ -283,8 +283,8 @@ } .resSliderLabel { - font-size: var(--fonts-sm); - color: var(--text-lighter); + font-size: var(--font-sm); + color: var(--color-text-high); white-space: nowrap; } @@ -294,14 +294,14 @@ } .resSliderValue { - font-size: var(--fonts-sm); - font-weight: var(--semi-bold); + font-size: var(--font-sm); + font-weight: var(--weight-semi); } .inkTime { - font-size: var(--fonts-sm); - color: var(--theme-secondary); - font-weight: var(--semi-bold); + font-size: var(--font-sm); + color: var(--color-text-second); + font-weight: var(--weight-semi); } .inkTimeSegment { @@ -313,27 +313,27 @@ padding: 0 var(--s-2); background: repeating-linear-gradient( -45deg, - var(--bg-lighter) 0, - var(--bg-lighter) 4px, - var(--bg-lightest) 4px, - var(--bg-lightest) 8px + var(--color-bg-higher) 0, + var(--color-bg-higher) 4px, + var(--color-bg-high) 4px, + var(--color-bg-high) 8px ); - color: var(--text); - font-weight: var(--semi-bold); + color: var(--color-text); + font-weight: var(--weight-semi); min-width: fit-content; } .inkTimeDamage { - font-size: var(--fonts-sm); - font-weight: var(--bold); - color: var(--text); + font-size: var(--font-sm); + font-weight: var(--weight-bold); + color: var(--color-text); } .inkTimeLabel { - font-size: var(--fonts-xxs); - color: var(--theme-secondary); + font-size: var(--font-2xs); + color: var(--color-text-second); text-align: center; white-space: nowrap; padding: var(--s-0-5) var(--s-0-5); - font-weight: var(--semi-bold); + font-weight: var(--weight-semi); } diff --git a/app/features/comp-analyzer/components/RangeVisualization.module.css b/app/features/comp-analyzer/components/RangeVisualization.module.css index 4296e75e0..f3eb7a395 100644 --- a/app/features/comp-analyzer/components/RangeVisualization.module.css +++ b/app/features/comp-analyzer/components/RangeVisualization.module.css @@ -1,9 +1,9 @@ .container { display: flex; flex-direction: column; - border: 1px solid var(--border); - border-radius: var(--rounded-sm); - background: var(--bg); + border: 1px solid var(--color-border); + border-radius: var(--radius-field); + background: var(--color-bg); } .header { @@ -11,19 +11,19 @@ align-items: center; justify-content: space-between; padding: var(--s-2) var(--s-3); - background: var(--bg-lighter); + background: var(--color-bg-higher); border: none; - border-radius: var(--rounded-sm); + border-radius: var(--radius-field); cursor: pointer; - font-size: var(--fonts-sm); - font-weight: var(--semi-bold); - color: var(--text); + font-size: var(--font-sm); + font-weight: var(--weight-semi); + color: var(--color-text); width: 100%; text-align: left; } .header:hover { - background: var(--bg-lightest); + background: var(--color-bg-high); } .headerTitle { @@ -31,9 +31,9 @@ } .collapseIcon { - font-size: var(--fonts-lg); - font-weight: var(--bold); - color: var(--text-lighter); + font-size: var(--font-lg); + font-weight: var(--weight-bold); + color: var(--color-text-high); width: 20px; text-align: center; } @@ -47,15 +47,15 @@ gap: var(--s-4); margin-bottom: var(--s-3); padding-bottom: var(--s-2); - border-bottom: 1px solid var(--border); + border-bottom: 1px solid var(--color-border); } .legendItem { display: flex; align-items: center; gap: var(--s-1); - font-size: var(--fonts-xs); - color: var(--text-lighter); + font-size: var(--font-xs); + color: var(--color-text-high); } .legendLine { @@ -99,9 +99,9 @@ } .weaponLegendRange { - font-size: var(--fonts-xs); - color: var(--text-lighter); - font-weight: var(--semi-bold); + font-size: var(--font-xs); + color: var(--color-text-high); + font-weight: var(--weight-semi); } .chart { diff --git a/app/features/comp-analyzer/components/RangeVisualization.tsx b/app/features/comp-analyzer/components/RangeVisualization.tsx index a74b1c4dc..7928eee4f 100644 --- a/app/features/comp-analyzer/components/RangeVisualization.tsx +++ b/app/features/comp-analyzer/components/RangeVisualization.tsx @@ -220,7 +220,7 @@ function TrajectoryChart({ y1={0} x2={xScale(tick)} y2={innerHeight} - stroke="var(--border)" + stroke="var(--color-border)" strokeWidth={0.5} /> ))} @@ -231,7 +231,7 @@ function TrajectoryChart({ y1={yScale(tick)} x2={innerWidth} y2={yScale(tick)} - stroke="var(--border)" + stroke="var(--color-border)" strokeWidth={0.5} /> ))} @@ -242,7 +242,7 @@ function TrajectoryChart({ y1={groundY} x2={innerWidth} y2={groundY} - stroke="var(--text-lighter)" + stroke="var(--color-text-high)" strokeWidth={1} /> @@ -308,7 +308,7 @@ function TrajectoryChart({ y={innerHeight + 15} textAnchor="middle" fontSize={10} - fill="var(--text-lighter)" + fill="var(--color-text-high)" > {tick} @@ -322,7 +322,7 @@ function TrajectoryChart({ y={yScale(tick) + 3} textAnchor="end" fontSize={10} - fill="var(--text-lighter)" + fill="var(--color-text-high)" > {tick} @@ -334,7 +334,7 @@ function TrajectoryChart({ y={innerHeight + 25} textAnchor="middle" fontSize={11} - fill="var(--text-lighter)" + fill="var(--color-text-high)" > z @@ -343,7 +343,7 @@ function TrajectoryChart({ y={innerHeight / 2} textAnchor="middle" fontSize={11} - fill="var(--text-lighter)" + fill="var(--color-text-high)" transform={`rotate(-90, -25, ${innerHeight / 2})`} > y diff --git a/app/features/comp-analyzer/components/SelectedWeapons.module.css b/app/features/comp-analyzer/components/SelectedWeapons.module.css index 2b1efe1d6..e3f242154 100644 --- a/app/features/comp-analyzer/components/SelectedWeapons.module.css +++ b/app/features/comp-analyzer/components/SelectedWeapons.module.css @@ -18,8 +18,8 @@ justify-content: center; width: 56px; height: 56px; - background-color: var(--bg-lightest); - border: 2px solid var(--border); + background-color: var(--color-bg-high); + border: 2px solid var(--color-border); border-radius: 50%; flex-shrink: 0; } @@ -32,8 +32,8 @@ justify-content: center; width: 56px; height: 56px; - background-color: var(--bg-lighter); - border: 2px dashed var(--border); + background-color: var(--color-bg-higher); + border: 2px dashed var(--color-border); border-radius: 50%; flex-shrink: 0; opacity: 0.6; @@ -45,16 +45,16 @@ gap: var(--s-2); padding: var(--s-2) var(--s-3); padding-left: var(--s-5); - background-color: var(--bg-lightest); - border: 2px solid var(--border); - border-radius: var(--rounded-full); + background-color: var(--color-bg-high); + border: 2px solid var(--color-border); + border-radius: var(--radius-full); flex: 1; min-width: 0; } .weaponName { flex: 1; - font-weight: var(--semi-bold); + font-weight: var(--weight-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -65,9 +65,9 @@ align-items: center; padding: var(--s-2) var(--s-3); padding-left: var(--s-5); - background-color: var(--bg-lighter); - border: 2px dashed var(--border); - border-radius: var(--rounded-full); + background-color: var(--color-bg-higher); + border: 2px dashed var(--color-border); + border-radius: var(--radius-full); flex: 1; min-width: 0; opacity: 0.6; @@ -75,9 +75,9 @@ .weaponNameEmpty { flex: 1; - font-weight: var(--semi-bold); + font-weight: var(--weight-semi); font-style: italic; - color: var(--text-lighter); + color: var(--color-text-high); } .removeButton { @@ -92,12 +92,12 @@ font-size: 18px; font-weight: bold; line-height: 1; - color: var(--text-lighter); + color: var(--color-text-high); flex-shrink: 0; } .removeButton:hover { - color: var(--theme-error); + color: var(--color-error); } .subSpecialContainer { @@ -116,7 +116,7 @@ justify-content: center; width: 40px; height: 40px; - background-color: var(--bg-lightest); - border: 2px solid var(--border); + background-color: var(--color-bg-high); + border: 2px solid var(--color-border); border-radius: 50%; } diff --git a/app/features/comp-analyzer/components/WeaponCategories.module.css b/app/features/comp-analyzer/components/WeaponCategories.module.css index 62429d5ce..a04106208 100644 --- a/app/features/comp-analyzer/components/WeaponCategories.module.css +++ b/app/features/comp-analyzer/components/WeaponCategories.module.css @@ -14,17 +14,17 @@ } .categoryLabel { - font-size: var(--fonts-sm); - font-weight: var(--semi-bold); - color: var(--text-lighter); + font-size: var(--font-sm); + font-weight: var(--weight-semi); + color: var(--color-text-high); } .categoryPill { display: flex; align-items: center; - background-color: var(--bg-lightest); - border: 2px solid var(--border); - border-radius: var(--rounded-full); + background-color: var(--color-bg-high); + border: 2px solid var(--color-border); + border-radius: var(--radius-full); overflow-x: auto; overflow-y: hidden; max-width: 100%; @@ -37,7 +37,7 @@ align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-4); - border-left: 1.5px solid var(--border); + border-left: 1.5px solid var(--color-border); flex-shrink: 0; } @@ -46,7 +46,7 @@ } .categoryName { - font-size: var(--fonts-xxs); - font-weight: var(--semi-bold); + font-size: var(--font-2xs); + font-weight: var(--weight-semi); white-space: nowrap; } diff --git a/app/features/comp-analyzer/components/WeaponGrid.module.css b/app/features/comp-analyzer/components/WeaponGrid.module.css index 8b0c853a0..520fc1fbf 100644 --- a/app/features/comp-analyzer/components/WeaponGrid.module.css +++ b/app/features/comp-analyzer/components/WeaponGrid.module.css @@ -11,8 +11,8 @@ background-color: transparent; border: none; cursor: pointer; - font-weight: var(--semi-bold); - color: var(--text); + font-weight: var(--weight-semi); + color: var(--color-text); } .collapseArrow { @@ -58,12 +58,12 @@ align-items: center; gap: var(--s-2); padding-bottom: var(--s-1); - border-bottom: 3px solid var(--border); + border-bottom: 3px solid var(--color-border); } .categoryName { - font-weight: var(--semi-bold); - font-size: var(--fonts-sm); + font-weight: var(--weight-semi); + font-size: var(--font-sm); text-transform: capitalize; } @@ -78,15 +78,15 @@ align-items: center; justify-content: center; padding: var(--s-1); - background-color: var(--bg-lighter); + background-color: var(--color-bg-higher); border: 2px solid transparent; - border-radius: var(--rounded); + border-radius: var(--radius-box); cursor: pointer; transition: border-color 0.1s; } .weaponButton:hover { - border-color: var(--theme); + border-color: var(--color-text-accent); } .weaponButton:disabled { @@ -99,6 +99,6 @@ } .weaponButtonSelected { - background-color: var(--bg-lightest); - border: 2px solid var(--border); + background-color: var(--color-bg-high); + border: 2px solid var(--color-border); }