Skip to content

Commit 8c1dd2c

Browse files
FlegmaFlegma
authored
bug: tactical-amber CTA gradient now follows branding color (#461)
Co-authored-by: Flegma <Flegma@users.noreply.github.com>
1 parent 5797231 commit 8c1dd2c

9 files changed

Lines changed: 30 additions & 22 deletions

File tree

‎assets/css/tailwind.css‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,11 @@
7878

7979
--tac-amber: 33 94% 58%;
8080
--tac-amber-foreground: 0 0% 10%;
81+
82+
/* CTA gradient endpoints derived from --tac-amber so the whole gradient
83+
follows branding (lighter tint -> base -> darker shade). */
84+
--tac-amber-cta-from: color-mix(in hsl, hsl(var(--tac-amber)), white 15%);
85+
--tac-amber-cta-to: color-mix(in hsl, hsl(var(--tac-amber)), black 12%);
8186
}
8287

8388
.dark {
@@ -146,6 +151,9 @@
146151

147152
--tac-amber: 33 94% 58%;
148153
--tac-amber-foreground: 0 0% 10%;
154+
155+
--tac-amber-cta-from: color-mix(in hsl, hsl(var(--tac-amber)), white 15%);
156+
--tac-amber-cta-to: color-mix(in hsl, hsl(var(--tac-amber)), black 12%);
149157
}
150158
}
151159

@@ -284,13 +292,13 @@ mark {
284292
}
285293

286294
.tac-amber-cta {
287-
color: hsl(0 0% 8%);
295+
color: hsl(var(--tac-amber-foreground));
288296
border-color: hsl(var(--tac-amber));
289297
background: linear-gradient(
290298
135deg,
291-
hsl(36 100% 65%) 0%,
299+
var(--tac-amber-cta-from) 0%,
292300
hsl(var(--tac-amber)) 50%,
293-
hsl(28 90% 52%) 100%
301+
var(--tac-amber-cta-to) 100%
294302
);
295303
box-shadow:
296304
0 0 0 1px hsl(var(--tac-amber) / 0.35),

‎components/MatchTableRow.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ import MatchOverviewDrawer from "~/components/match/MatchOverviewDrawer.vue";
144144
<button
145145
v-if="canJoinMatch"
146146
type="button"
147-
class="group/join relative inline-flex items-center isolate px-[0.7rem] py-[0.28rem] font-sans text-[0.68rem] font-bold tracking-[0.16em] uppercase text-[hsl(0_0%_8%)] [background:linear-gradient(135deg,hsl(36_100%_65%)_0%,hsl(var(--tac-amber))_50%,hsl(28_90%_52%)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.35),0_4px_14px_-4px_hsl(var(--tac-amber)/0.5)] [transition:transform_180ms_cubic-bezier(0.4,0,0.2,1),box-shadow_180ms_ease] cursor-pointer overflow-hidden whitespace-nowrap hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.55),0_10px_24px_-4px_hsl(var(--tac-amber)/0.7),0_0_20px_hsl(var(--tac-amber)/0.3)] active:translate-y-0"
147+
class="group/join relative inline-flex items-center isolate px-[0.7rem] py-[0.28rem] font-sans text-[0.68rem] font-bold tracking-[0.16em] uppercase text-[hsl(var(--tac-amber-foreground))] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.35),0_4px_14px_-4px_hsl(var(--tac-amber)/0.5)] [transition:transform_180ms_cubic-bezier(0.4,0,0.2,1),box-shadow_180ms_ease] cursor-pointer overflow-hidden whitespace-nowrap hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.55),0_10px_24px_-4px_hsl(var(--tac-amber)/0.7),0_0_20px_hsl(var(--tac-amber)/0.3)] active:translate-y-0"
148148
@click.stop="navigateToMatch(match.id, $event)"
149149
>
150150
<span class="relative z-[1] inline-flex items-center gap-[0.45rem]">

‎components/clips/ClipDetailModal.vue‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1262,39 +1262,39 @@ onMounted(() => {
12621262
border-color: hsl(var(--tac-amber));
12631263
background: linear-gradient(
12641264
135deg,
1265-
hsl(36 100% 65%) 0%,
1265+
var(--tac-amber-cta-from) 0%,
12661266
hsl(var(--tac-amber)) 50%,
1267-
hsl(28 90% 52%) 100%
1267+
var(--tac-amber-cta-to) 100%
12681268
);
1269-
color: hsl(0 0% 8%);
1269+
color: hsl(var(--tac-amber-foreground));
12701270
font-weight: 700;
12711271
letter-spacing: 0.18em;
12721272
box-shadow:
12731273
0 0 0 1px hsl(var(--tac-amber) / 0.35),
12741274
0 6px 18px -6px hsl(var(--tac-amber) / 0.55);
12751275
}
12761276
.action-tile--primary::after {
1277-
border-top-color: hsl(0 0% 8% / 0.65);
1278-
border-right-color: hsl(0 0% 8% / 0.65);
1277+
border-top-color: hsl(var(--tac-amber-foreground) / 0.65);
1278+
border-right-color: hsl(var(--tac-amber-foreground) / 0.65);
12791279
}
12801280
.action-tile--primary:hover {
12811281
transform: translateY(-1px);
12821282
background: linear-gradient(
12831283
135deg,
1284-
hsl(36 100% 70%) 0%,
1284+
color-mix(in hsl, var(--tac-amber-cta-from), white 12%) 0%,
12851285
hsl(var(--tac-amber)) 50%,
1286-
hsl(28 92% 56%) 100%
1286+
color-mix(in hsl, var(--tac-amber-cta-to), white 10%) 100%
12871287
);
1288-
color: hsl(0 0% 6%);
1288+
color: hsl(var(--tac-amber-foreground));
12891289
border-color: hsl(var(--tac-amber));
12901290
box-shadow:
12911291
0 0 0 1px hsl(var(--tac-amber) / 0.55),
12921292
0 12px 28px -6px hsl(var(--tac-amber) / 0.75),
12931293
0 0 24px hsl(var(--tac-amber) / 0.35);
12941294
}
12951295
.action-tile--primary:hover::after {
1296-
border-top-color: hsl(0 0% 8%);
1297-
border-right-color: hsl(0 0% 8%);
1296+
border-top-color: hsl(var(--tac-amber-foreground));
1297+
border-right-color: hsl(var(--tac-amber-foreground));
12981298
}
12991299
.action-tile--primary:active {
13001300
transform: translateY(0);

‎components/match/MatchForm.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const tickClasses = "w-[10px] h-[2px] bg-[hsl(var(--tac-amber))]";
4848
const accessBtnClasses =
4949
"inline-flex items-center justify-center gap-[0.45rem] px-[0.65rem] py-[0.6rem] text-[0.8rem] font-semibold tracking-[0.12em] uppercase bg-[hsl(var(--muted)/0.3)] border border-border text-muted-foreground [transition:color_140ms_ease,background_140ms_ease,border-color_140ms_ease] cursor-pointer hover:text-foreground hover:bg-[hsl(var(--muted)/0.5)]";
5050
const accessBtnActiveClasses =
51-
"!text-[hsl(0_0%_8%)] [background:linear-gradient(135deg,hsl(36_100%_65%)_0%,hsl(var(--tac-amber))_100%)] !border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_16px_-6px_hsl(var(--tac-amber)/0.5)] hover:[background:linear-gradient(135deg,hsl(36_100%_68%)_0%,hsl(var(--tac-amber))_100%)]";
51+
"!text-[hsl(var(--tac-amber-foreground))] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_100%)] !border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_16px_-6px_hsl(var(--tac-amber)/0.5)] hover:[background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_100%)]";
5252
const tacLabelClasses =
5353
"font-mono text-[0.7rem] tracking-[0.22em] uppercase text-muted-foreground";
5454
</script>
@@ -217,7 +217,7 @@ const tacLabelClasses =
217217
<button
218218
type="submit"
219219
:disabled="submitting"
220-
class="group/submit relative isolate inline-flex items-center px-12 py-4 font-bold text-base tracking-[0.22em] uppercase text-[hsl(0_0%_8%)] [background:linear-gradient(135deg,hsl(36_100%_65%)_0%,hsl(var(--tac-amber))_50%,hsl(28_90%_52%)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_8px_24px_-6px_hsl(var(--tac-amber)/0.6)] [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1),box-shadow_200ms_ease] cursor-pointer overflow-hidden hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_14px_36px_-6px_hsl(var(--tac-amber)/0.8),0_0_28px_hsl(var(--tac-amber)/0.35)] active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
220+
class="group/submit relative isolate inline-flex items-center px-12 py-4 font-bold text-base tracking-[0.22em] uppercase text-[hsl(var(--tac-amber-foreground))] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_8px_24px_-6px_hsl(var(--tac-amber)/0.6)] [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1),box-shadow_200ms_ease] cursor-pointer overflow-hidden hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_14px_36px_-6px_hsl(var(--tac-amber)/0.8),0_0_28px_hsl(var(--tac-amber)/0.35)] active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
221221
>
222222
<span class="relative z-[1] inline-flex items-center gap-3">
223223
<Spinner v-if="submitting" class="w-5 h-5" />

‎components/teams/TeamForm.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const labelClasses =
1616
"font-mono text-[0.7rem] uppercase tracking-[0.18em] text-muted-foreground";
1717
1818
const submitClasses =
19-
"w-full bg-[hsl(var(--tac-amber))] hover:bg-[hsl(var(--tac-amber)_/_0.9)] text-[hsl(0_0%_8%)] font-sans font-bold uppercase tracking-[0.18em] disabled:opacity-60";
19+
"w-full bg-[hsl(var(--tac-amber))] hover:bg-[hsl(var(--tac-amber)_/_0.9)] text-[hsl(var(--tac-amber-foreground))] font-sans font-bold uppercase tracking-[0.18em] disabled:opacity-60";
2020
</script>
2121

2222
<template>

‎components/tournament/TournamentForm.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ import MatchOptions from "~/components/MatchOptions.vue";
141141
<button
142142
type="submit"
143143
:disabled="submitting || Object.keys(form.errors).length > 0"
144-
class="group/submit relative isolate inline-flex items-center px-12 py-4 font-bold text-base tracking-[0.22em] uppercase text-[hsl(0_0%_8%)] [background:linear-gradient(135deg,hsl(36_100%_65%)_0%,hsl(var(--tac-amber))_50%,hsl(28_90%_52%)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_8px_24px_-6px_hsl(var(--tac-amber)/0.6)] [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1),box-shadow_200ms_ease] cursor-pointer overflow-hidden hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_14px_36px_-6px_hsl(var(--tac-amber)/0.8),0_0_28px_hsl(var(--tac-amber)/0.35)] active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
144+
class="group/submit relative isolate inline-flex items-center px-12 py-4 font-bold text-base tracking-[0.22em] uppercase text-[hsl(var(--tac-amber-foreground))] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_8px_24px_-6px_hsl(var(--tac-amber)/0.6)] [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1),box-shadow_200ms_ease] cursor-pointer overflow-hidden hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_14px_36px_-6px_hsl(var(--tac-amber)/0.8),0_0_28px_hsl(var(--tac-amber)/0.35)] active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
145145
>
146146
<span class="relative z-[1] inline-flex items-center gap-3">
147147
<Spinner v-if="submitting" class="w-5 h-5" />

‎layouts/components/MatchLobbies.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const isElevatedUser = computed(() =>
6363
v-if="showPlayButton"
6464
to="/play"
6565
:title="$t('layouts.lobby_panel.find_match')"
66-
class="group/play relative isolate mr-2 inline-flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border border-[hsl(var(--tac-amber))] text-[hsl(0_0%_8%)] no-underline [background:linear-gradient(135deg,hsl(36_100%_65%)_0%,hsl(var(--tac-amber))_50%,hsl(28_90%_52%)_100%)] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_20px_-6px_hsl(var(--tac-amber)/0.6)] transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_12px_32px_-6px_hsl(var(--tac-amber)/0.8),0_0_24px_hsl(var(--tac-amber)/0.35)] active:translate-y-0"
66+
class="group/play relative isolate mr-2 inline-flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border border-[hsl(var(--tac-amber))] text-[hsl(var(--tac-amber-foreground))] no-underline [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_20px_-6px_hsl(var(--tac-amber)/0.6)] transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_12px_32px_-6px_hsl(var(--tac-amber)/0.8),0_0_24px_hsl(var(--tac-amber)/0.35)] active:translate-y-0"
6767
>
6868
<Play
6969
class="relative z-[1] h-4 w-4 fill-current transition-transform duration-300 group-hover/play:scale-110"

‎layouts/components/TopoBackground.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ withDefaults(defineProps<{ animated?: boolean }>(), { animated: false });
5656
frame, stacked strokes don't. -->
5757
<template v-if="animated">
5858
<g
59-
class="text-foreground/[0.12] dark:text-[hsl(36_100%_70%/0.18)]"
59+
class="text-foreground/[0.12] dark:text-[hsl(var(--tac-amber)/0.18)]"
6060
fill="none"
6161
stroke="currentColor"
6262
stroke-width="4"
@@ -77,7 +77,7 @@ withDefaults(defineProps<{ animated?: boolean }>(), { animated: false });
7777
/>
7878
</g>
7979
<g
80-
class="text-foreground/55 dark:text-[hsl(36_100%_70%/0.6)]"
80+
class="text-foreground/55 dark:text-[hsl(var(--tac-amber)/0.6)]"
8181
fill="none"
8282
stroke="currentColor"
8383
stroke-width="1.4"

‎pages/players/[id].vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1647,7 +1647,7 @@ const playerHeroSteamLinkClasses =
16471647
const playerHeroRightActionsClasses =
16481648
"mt-auto flex flex-col items-stretch gap-3 pt-6";
16491649
const playerHeroPlayClasses =
1650-
"group/play relative isolate inline-flex w-full cursor-pointer items-center justify-center overflow-hidden border font-sans text-[0.85rem] font-bold uppercase tracking-[0.18em] no-underline transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-px active:translate-y-0 py-[0.7rem] px-4 text-[hsl(0_0%_8%)] border-[hsl(var(--tac-amber))] [background:linear-gradient(135deg,hsl(36_100%_65%)_0%,hsl(var(--tac-amber))_50%,hsl(28_90%_52%)_100%)] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_20px_-6px_hsl(var(--tac-amber)/0.6)] hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_12px_32px_-6px_hsl(var(--tac-amber)/0.8),0_0_24px_hsl(var(--tac-amber)/0.35)]";
1650+
"group/play relative isolate inline-flex w-full cursor-pointer items-center justify-center overflow-hidden border font-sans text-[0.85rem] font-bold uppercase tracking-[0.18em] no-underline transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-px active:translate-y-0 py-[0.7rem] px-4 text-[hsl(var(--tac-amber-foreground))] border-[hsl(var(--tac-amber))] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_20px_-6px_hsl(var(--tac-amber)/0.6)] hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_12px_32px_-6px_hsl(var(--tac-amber)/0.8),0_0_24px_hsl(var(--tac-amber)/0.35)]";
16511651
const playerHeroPlayInnerClasses =
16521652
"relative z-[1] inline-flex items-center gap-[0.65rem]";
16531653
const playerHeroPlayIconClasses =

0 commit comments

Comments
 (0)