Skip to content

Commit c5d978b

Browse files
feloyfeloy
authored
refactor: use tailwindcss canonical form (#422)
Signed-off-by: Philippe Martin <[email protected]>
1 parent b45f813 commit c5d978b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+165
-167
lines changed

‎packages/webview/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
66
<title>Kubernetes Dashboard Extension</title>
77
</head>
8-
<body class="overflow-auto text-base text-[var(--pd-default-text)]">
8+
<body class="overflow-auto text-base text-(--pd-default-text)">
99
<div id="app"></div>
1010
<script type="module" src="./src/index.ts"></script>
1111
</body>

‎packages/webview/src/App.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ function waitThrottleDelay(): Promise<void> {
3232
</script>
3333

3434
<Route path="/*" isAppMounted={isMounted} let:meta>
35-
<main class="flex flex-col w-screen h-screen overflow-hidden bg-[var(--pd-content-bg)] text-base">
35+
<main class="flex flex-col w-screen h-screen overflow-hidden bg-(--pd-content-bg) text-base">
3636
<div class="flex flex-row w-full h-full overflow-hidden">
3737
{#if !currentContextName}
3838
{#await waitThrottleDelay() then _}

‎packages/webview/src/Navigation.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ const navigator = dependencyAccessor.get<Navigator>(Navigator);
1616
</script>
1717

1818
<nav
19-
class="z-1 w-leftsidebar min-w-leftsidebar shadow-xs flex-col justify-between flex transition-all duration-500 ease-in-out bg-[var(--pd-secondary-nav-bg)] border-[var(--pd-global-nav-bg-border)] border-r-[1px]"
19+
class="z-1 w-leftsidebar min-w-leftsidebar shadow-xs flex-col justify-between flex transition-all duration-500 ease-in-out bg-(--pd-secondary-nav-bg) border-(--pd-global-nav-bg-border) border-r-[1px]"
2020
aria-label="PreferencesNavigation">
2121
<div class="flex items-center">
2222
<div class="pt-4 pl-3 px-5 mb-10 flex items-center ml-[4px]">
23-
<p class="text-xl first-letter:uppercase text-[color:var(--pd-secondary-nav-header-text)]">Kubernetes</p>
23+
<p class="text-xl first-letter:uppercase text-(--pd-secondary-nav-header-text)">Kubernetes</p>
2424
</div>
2525
</div>
2626
<div class="h-full overflow-hidden hover:overflow-y-auto" style="margin-bottom:auto">

‎packages/webview/src/component/button/IconButton.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,13 @@ let {
2929
}: Props = $props();
3030
3131
const buttonDetailedClass =
32-
'text-[var(--pd-action-button-details-text)] bg-[var(--pd-action-button-details-bg)] hover:text-[var(--pd-action-button-details-hover-text)] font-medium rounded-lg text-sm items-center px-3 py-2 text-center';
32+
'text-(--pd-action-button-details-text) bg-(--pd-action-button-details-bg) hover:text-(--pd-action-button-details-hover-text) font-medium rounded-lg text-sm items-center px-3 py-2 text-center';
3333
const buttonDetailedDisabledClass =
34-
'text-[var(--pd-action-button-details-disabled-text)] bg-[var(--pd-action-button-details-disabled-bg)] font-medium rounded-lg text-sm items-center px-3 py-2 text-center';
34+
'text-(--pd-action-button-details-disabled-text) bg-(--pd-action-button-details-disabled-bg) font-medium rounded-lg text-sm items-center px-3 py-2 text-center';
3535
const buttonClass =
36-
'text-[var(--pd-action-button-text)] hover:bg-[var(--pd-action-button-hover-bg)] hover:text-[var(--pd-action-button-hover-text)] font-medium rounded-full items-center px-2 py-2 text-center';
36+
'text-(--pd-action-button-text) hover:bg-(--pd-action-button-hover-bg) hover:text-(--pd-action-button-hover-text) font-medium rounded-full items-center px-2 py-2 text-center';
3737
const buttonDisabledClass =
38-
'text-[var(--pd-action-button-disabled-text)] font-medium rounded-full items-center px-2 py-2 text-center';
38+
'text-(--pd-action-button-disabled-text) font-medium rounded-full items-center px-2 py-2 text-center';
3939
4040
const styleClass = $derived(
4141
detailed
@@ -81,7 +81,7 @@ function handleClick(): void {
8181

8282
<div
8383
aria-label="spinner"
84-
class="w-6 h-6 rounded-full animate-spin border border-solid border-[var(--pd-action-button-spinner)] border-t-transparent absolute {positionTopClass} {positionLeftClass}"
84+
class="w-6 h-6 rounded-full animate-spin border border-solid border-(--pd-action-button-spinner) border-t-transparent absolute {positionTopClass} {positionLeftClass}"
8585
class:hidden={!inProgress}>
8686
</div>
8787
</button>

‎packages/webview/src/component/configmaps-secrets/columns/Type.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ test('Expect type display for ConfigMap', async () => {
4141
expect(text).toBeInTheDocument();
4242
const svg = text.parentElement?.querySelector('svg');
4343
expect(svg).toBeInTheDocument();
44-
expect(svg).toHaveClass('text-[var(--pd-status-running)]');
44+
expect(svg).toHaveClass('text-(--pd-status-running)');
4545
});
4646

4747
test('Expect type display for Secret', async () => {
@@ -61,5 +61,5 @@ test('Expect type display for Secret', async () => {
6161
expect(text).toBeInTheDocument();
6262
const svg = text.parentElement?.querySelector('svg');
6363
expect(svg).toBeInTheDocument();
64-
expect(svg).toHaveClass('text-[var(--pd-status-running)]');
64+
expect(svg).toHaveClass('text-(--pd-status-running)');
6565
});

‎packages/webview/src/component/configmaps-secrets/columns/Type.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ let { object }: Props = $props();
1111
function getTypeAttributes(type: string): { color: string; icon: IconDefinition } {
1212
const isConfigMap = type === 'ConfigMap';
1313
return {
14-
color: 'text-[var(--pd-status-running)]',
14+
color: 'text-(--pd-status-running)',
1515
icon: isConfigMap ? faFileAlt : faKey,
1616
};
1717
}

‎packages/webview/src/component/connection/CheckConnection.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,5 +54,5 @@ function refresh(): void {
5454

5555
{#if currentContext.data?.contextName && !isReachableAndNotOffline}
5656
<Button on:click={refresh} icon={faRefresh} inProgress={inProgress}>Refresh</Button>
57-
{#if error}<div class="p-2 text-[var(--pd-state-error)]">{error}</div>{/if}
57+
{#if error}<div class="p-2 text-(--pd-state-error)">{error}</div>{/if}
5858
{/if}

‎packages/webview/src/component/connection/CurrentContextConnectionBadge.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ describe('current context is reachable', () => {
9595
render(CurrentContextConnectionBadge);
9696

9797
const status = screen.getByRole('status');
98-
expect(status.firstChild).toHaveClass('bg-[var(--pd-status-connected)]');
98+
expect(status.firstChild).toHaveClass('bg-(--pd-status-connected)');
9999
});
100100

101101
test('no tooltip', async () => {
@@ -139,7 +139,7 @@ describe('current context is not reachable', () => {
139139
render(CurrentContextConnectionBadge);
140140

141141
const status = screen.getByRole('status');
142-
expect(status.firstChild).toHaveClass('bg-[var(--pd-status-disconnected)]');
142+
expect(status.firstChild).toHaveClass('bg-(--pd-status-disconnected)');
143143
});
144144

145145
test('tooltip', async () => {
@@ -183,7 +183,7 @@ describe('current context is offline', () => {
183183
render(CurrentContextConnectionBadge);
184184

185185
const status = screen.getByRole('status');
186-
expect(status.firstChild).toHaveClass('bg-[var(--pd-status-paused)]');
186+
expect(status.firstChild).toHaveClass('bg-(--pd-status-paused)');
187187
});
188188

189189
test('expect tooltip when offline', async () => {

‎packages/webview/src/component/connection/CurrentContextConnectionBadge.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,9 @@ function getText(health: ContextHealth): string {
6161
}
6262
6363
function getClassColor(health: ContextHealth): string {
64-
if (health.offline) return 'bg-[var(--pd-status-paused)]';
65-
if (health.reachable) return 'bg-[var(--pd-status-connected)]';
66-
return 'bg-[var(--pd-status-disconnected)]';
64+
if (health.offline) return 'bg-(--pd-status-paused)';
65+
if (health.reachable) return 'bg-(--pd-status-connected)';
66+
return 'bg-(--pd-status-disconnected)';
6767
}
6868
6969
function getTip(health: ContextHealth): string {

‎packages/webview/src/component/cronjobs/columns/Schedule.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,6 @@ function getScheduleReadableText(schedule: string): string {
1818
}
1919
</script>
2020

21-
<div class="text-[var(--pd-table-body-text)] max-w-full text-wrap line-clamp-2">
21+
<div class="text-(--pd-table-body-text) max-w-full text-wrap line-clamp-2">
2222
<span>{getScheduleReadableText(object)}</span>
2323
</div>

0 commit comments

Comments
 (0)