Skip to content

Commit 3be12e1

Browse files
christian-byrnechristian-byrne
authored
Backport: Css token standardization (#6363) (#6669)
## Summary Backports the CSS token standardization changes from PR #6363 to the `core/1.30` branch. Resolved merge conflict in `MediaTitle.vue` and added missing `truncateFilename` function to maintain compatibility. **Original PR**: #6363 **Cherry-picked commit**: bde5244 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6669-Backport-Css-token-standardization-6363-2aa6d73d36508153be09cdc67f6ac8a4) by [Unito](https://www.unito.io)
1 parent 85d3bc2 commit 3be12e1

File tree

18 files changed

+150
-46
lines changed

18 files changed

+150
-46
lines changed

‎packages/design-system/src/css/style.css‎

Lines changed: 84 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,27 +49,42 @@
4949
--color-smoke-800: #8a8a8a;
5050

5151
--color-sand-100: #e1ded5;
52-
--color-sand-200: #d6cfc2;
52+
--color-sand-200: #fff7d5;
5353
--color-sand-300: #888682;
54+
--color-sand-400: #eed7ac;
5455

5556
--color-slate-100: #9c9eab;
5657
--color-slate-200: #9fa2bd;
5758
--color-slate-300: #5b5e7d;
5859

60+
--color-white: #ffffff;
61+
--color-black: #000000;
62+
5963
--color-electric-400: #f0ff41;
6064
--color-sapphire-700: #172dd7;
6165
--color-brand-yellow: var(--color-electric-400);
6266
--color-brand-blue: var(--color-sapphire-700);
6367

68+
--color-azure-300: #78bae9;
6469
--color-azure-400: #31b9f4;
6570
--color-azure-600: #0b8ce9;
6671

72+
--color-cobalt-800: #185a8b;
73+
6774
--color-jade-400: #47e469;
6875
--color-jade-600: #00cd72;
6976

7077
--color-gold-400: #fcbf64;
78+
--color-gold-500: #fdab34;
7179
--color-gold-600: #fd9903;
7280

81+
--color-coral-500: #f75951;
82+
--color-coral-600: #e04e48;
83+
--color-coral-700: #b33a3a;
84+
85+
--color-magenta-300: #ceaac9;
86+
--color-magenta-700: #6a246a;
87+
7388
--color-danger-100: #c02323;
7489
--color-danger-200: #d62952;
7590

@@ -101,6 +116,11 @@
101116
var(--color-smoke-500) 50%,
102117
transparent
103118
);
119+
--color-alpha-smoke-500-20: #c5c5c533;
120+
--color-alpha-smoke-400-40: #d9d9d966;
121+
--color-alpha-azure-600-30: #0b8ce94d;
122+
--color-alpha-magenta-700-60: #6a246a99;
123+
--color-alpha-magenta-300-60: #ceaac999;
104124

105125
/* PrimeVue pulled colors */
106126
--color-muted: var(--p-text-muted-color);
@@ -196,6 +216,27 @@
196216
--text-secondary: var(--color-ash-500);
197217
--text-primary: var(--color-charcoal-700);
198218
--input-surface: rgb(0 0 0 / 0.15);
219+
220+
/* Semantic tokens - light mode */
221+
--muted-foreground: var(--color-charcoal-200);
222+
--base-foreground: var(--color-charcoal-800);
223+
--brand-yellow: var(--color-electric-400);
224+
--brand-blue: var(--color-sapphire-700);
225+
--secondary-background: var(--color-smoke-200);
226+
--secondary-background-hover: var(--color-smoke-400);
227+
--secondary-background-selected: var(--color-smoke-600);
228+
--base-background: var(--color-white);
229+
--primary-background: var(--color-azure-400);
230+
--primary-background-hover: var(--color-cobalt-800);
231+
--destructive-background: var(--color-coral-500);
232+
--destructive-background-hover: var(--color-coral-600);
233+
--inverted-background-hover: var(--color-charcoal-600);
234+
--warning-background: var(--color-gold-400);
235+
--warning-background-hover: var(--color-gold-500);
236+
--border-default: var(--color-smoke-600);
237+
--border-subtle: var(--color-smoke-400);
238+
--muted-background: var(--color-smoke-700);
239+
--accent-background: var(--color-smoke-800);
199240
}
200241

201242
.dark-theme {
@@ -257,6 +298,27 @@
257298
--text-primary: var(--color-white);
258299

259300
--input-surface: rgb(130 130 130 / 0.1);
301+
302+
/* Semantic tokens - dark mode */
303+
--muted-foreground: var(--color-smoke-800);
304+
--base-foreground: var(--color-white);
305+
--brand-yellow: var(--color-electric-400);
306+
--brand-blue: var(--color-sapphire-700);
307+
--secondary-background: var(--color-charcoal-600);
308+
--secondary-background-hover: var(--color-charcoal-400);
309+
--secondary-background-selected: var(--color-charcoal-200);
310+
--base-background: var(--color-charcoal-800);
311+
--primary-background: var(--color-azure-600);
312+
--primary-background-hover: var(--color-azure-400);
313+
--destructive-background: var(--color-coral-700);
314+
--destructive-background-hover: var(--color-coral-600);
315+
--inverted-background-hover: var(--color-smoke-200);
316+
--warning-background: var(--color-gold-600);
317+
--warning-background-hover: var(--color-gold-500);
318+
--border-default: var(--color-charcoal-200);
319+
--border-subtle: var(--color-charcoal-300);
320+
--muted-background: var(--color-charcoal-100);
321+
--accent-background: var(--color-charcoal-100);
260322
}
261323

262324
@theme inline {
@@ -321,6 +383,27 @@
321383
--color-text-secondary: var(--text-secondary);
322384
--color-text-primary: var(--text-primary);
323385
--color-input-surface: var(--input-surface);
386+
387+
/* Semantic tokens */
388+
--color-base-foreground: var(--base-foreground);
389+
--color-muted-foreground: var(--muted-foreground);
390+
--color-base-background: var(--base-background);
391+
--color-secondary-background: var(--secondary-background);
392+
--color-secondary-background-hover: var(--secondary-background-hover);
393+
--color-secondary-background-selected: var(--secondary-background-selected);
394+
--color-primary-background: var(--primary-background);
395+
--color-primary-background-hover: var(--primary-background-hover);
396+
--color-destructive-background: var(--destructive-background);
397+
--color-destructive-background-hover: var(--destructive-background-hover);
398+
--color-inverted-background-hover: var(--inverted-background-hover);
399+
--color-warning-background: var(--warning-background);
400+
--color-warning-background-hover: var(--warning-background-hover);
401+
--color-border-default: var(--border-default);
402+
--color-border-subtle: var(--border-subtle);
403+
--color-muted-background: var(--muted-background);
404+
--color-accent-background: var(--accent-background);
405+
--color-brand-yellow: var(--brand-yellow);
406+
--color-brand-blue: var(--brand-blue);
324407
}
325408

326409
@custom-variant dark-theme {

‎packages/shared-frontend-utils/src/formatUtil.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -474,3 +474,13 @@ export function formatDuration(milliseconds: number): string {
474474

475475
return parts.join(' ')
476476
}
477+
478+
/**
479+
* Truncates a filename for display purposes.
480+
* Currently returns the filename as-is since truncation is handled by CSS.
481+
* @param filename The filename to truncate
482+
* @returns The display-ready filename
483+
*/
484+
export function truncateFilename(filename: string): string {
485+
return filename
486+
}

‎src/components/custom/widget/WorkflowTemplateSelectorDialog.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@
144144
size="compact"
145145
variant="ghost"
146146
rounded="lg"
147-
class="hover:bg-white dark-theme:hover:bg-zinc-800"
147+
class="hover:bg-base-background"
148148
>
149149
<template #top>
150150
<CardTop ratio="landscape">
@@ -178,7 +178,7 @@
178178
variant="ghost"
179179
rounded="lg"
180180
:data-testid="`template-workflow-${template.name}`"
181-
class="hover:bg-white dark-theme:hover:bg-zinc-800"
181+
class="hover:bg-base-background"
182182
@mouseenter="hoveredTemplate = template.name"
183183
@mouseleave="hoveredTemplate = null"
184184
@click="onLoadWorkflow(template)"
@@ -323,7 +323,7 @@
323323
size="compact"
324324
variant="ghost"
325325
rounded="lg"
326-
class="hover:bg-white dark-theme:hover:bg-zinc-800"
326+
class="hover:bg-base-background"
327327
>
328328
<template #top>
329329
<CardTop ratio="square">

‎src/components/graph/selectionToolbox/BypassButton.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ describe('BypassButton', () => {
9292
const button = wrapper.find('button')
9393

9494
expect(button.classes()).not.toContain(
95-
'dark-theme:[&:not(:active)]:!bg-[#262729]'
95+
'dark-theme:[&:not(:active)]:!bg-charcoal-600'
9696
)
9797
})
9898

‎src/components/graph/selectionToolbox/BypassButton.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
severity="secondary"
88
text
99
data-testid="bypass-button"
10-
class="hover:bg-[#E7E6E6] hover:dark-theme:bg-charcoal-600"
10+
class="hover:bg-secondary-background"
1111
@click="toggleBypass"
1212
>
1313
<template #icon>

‎src/components/graph/selectionToolbox/ExecuteButton.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
value: t('selectionToolbox.executeButton.tooltip'),
55
showDelay: 1000
66
}"
7-
class="size-8 bg-[#31B9F4] !p-0 dark-theme:bg-[#0B8CE9]"
7+
class="size-8 bg-azure-400 !p-0 dark-theme:bg-azure-600"
88
text
99
@mouseenter="() => handleMouseEnter()"
1010
@mouseleave="() => handleMouseLeave()"

‎src/components/graph/selectionToolbox/MenuOptionItem.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@
2727
:severity="option.badge === 'new' ? 'info' : 'secondary'"
2828
:value="t(option.badge)"
2929
:class="{
30-
'rounded-4xl bg-[#31B9F4] dark-theme:bg-[#0B8CE9]':
30+
'rounded-4xl bg-azure-400 dark-theme:bg-azure-600':
3131
option.badge === 'new',
32-
'rounded-4xl bg-[#9C9EAB] dark-theme:bg-[#000]':
32+
'rounded-4xl bg-slate-100 dark-theme:bg-black':
3333
option.badge === 'deprecated',
3434
'h-4 gap-2.5 px-1 text-[9px] text-white uppercase': true
3535
}"

‎src/platform/assets/components/AssetCard.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,7 @@
2727
:class="
2828
cn(
2929
'mb-2 m-0 text-base font-semibold line-clamp-2 wrap-anywhere',
30-
'text-slate-800',
31-
'dark-theme:text-white'
30+
'text-base-foreground'
3231
)
3332
"
3433
>
@@ -111,7 +110,7 @@ const cardClasses = computed(() => {
111110
'appearance-none bg-transparent p-0 m-0',
112111
'font-inherit text-inherit outline-none cursor-pointer text-left',
113112
'bg-smoke-100 dark-theme:bg-charcoal-800',
114-
'hover:bg-smoke-200 dark-theme:hover:bg-charcoal-600',
113+
'hover:bg-secondary-background',
115114
'border-none',
116115
'focus:outline-solid outline-azure-600 outline-4'
117116
)

‎src/platform/assets/components/MediaAssetMoreMenu.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<IconTextButton
44
v-if="asset?.kind !== '3D'"
55
type="transparent"
6-
class="dark-theme:text-white"
6+
class="text-base-foreground"
77
label="Inspect asset"
88
@click="handleInspect"
99
>
@@ -14,7 +14,7 @@
1414

1515
<IconTextButton
1616
type="transparent"
17-
class="dark-theme:text-white"
17+
class="text-base-foreground"
1818
label="Add to current workflow"
1919
@click="handleAddToWorkflow"
2020
>
@@ -25,7 +25,7 @@
2525

2626
<IconTextButton
2727
type="transparent"
28-
class="dark-theme:text-white"
28+
class="text-base-foreground"
2929
label="Download"
3030
@click="handleDownload"
3131
>
@@ -39,7 +39,7 @@
3939
<IconTextButton
4040
v-if="showWorkflowOptions"
4141
type="transparent"
42-
class="dark-theme:text-white"
42+
class="text-base-foreground"
4343
label="Open as workflow in new tab"
4444
@click="handleOpenWorkflow"
4545
>
@@ -51,7 +51,7 @@
5151
<IconTextButton
5252
v-if="showWorkflowOptions"
5353
type="transparent"
54-
class="dark-theme:text-white"
54+
class="text-base-foreground"
5555
label="Export workflow"
5656
@click="handleExportWorkflow"
5757
>
@@ -64,7 +64,7 @@
6464

6565
<IconTextButton
6666
type="transparent"
67-
class="dark-theme:text-white"
67+
class="text-base-foreground"
6868
label="Copy job ID"
6969
@click="handleCopyJobId"
7070
>
@@ -77,7 +77,7 @@
7777

7878
<IconTextButton
7979
type="transparent"
80-
class="dark-theme:text-white"
80+
class="text-base-foreground"
8181
label="Delete"
8282
@click="handleDelete"
8383
>

‎src/platform/assets/components/MediaTitle.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<h3
3+
class="m-0 line-clamp-1 text-sm font-bold text-base-foreground"
4+
:title="fullName"
5+
>
6+
{{ displayName }}
7+
</h3>
8+
</template>
9+
10+
<script setup lang="ts">
11+
import { computed } from 'vue'
12+
13+
import { truncateFilename } from '@/utils/formatUtil'
14+
15+
const props = defineProps<{
16+
fileName: string
17+
}>()
18+
19+
const fullName = computed(() => props.fileName)
20+
const displayName = computed(() => truncateFilename(props.fileName))
21+
</script>

0 commit comments

Comments
 (0)