svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

prefix theme colors for consumer compatibility

Browse Source
This commit is contained in:
Elijah Duffy
2025-07-03 20:21:38 -07:00
parent ed434f88ed
commit 9988e07108
14 changed files with 91 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/Button.svelte
View File

@@ -64,8 +64,8 @@
<button
class={[
'button group relative flex gap-3 overflow-hidden rounded-sm px-5',
'text-background cursor-pointer py-3 font-medium transition-colors',
!loading ? ' bg-primary hover:bg-secondary' : 'bg-primary/50 cursor-not-allowed ',
'text-sui-background cursor-pointer py-3 font-medium transition-colors',
!loading ? ' bg-sui-primary hover:bg-sui-secondary' : 'bg-sui-primary/50 cursor-not-allowed ',
classValue
]}
onclick={handleButtonClick}

10
src/lib/Checkbox.svelte
View File

@@ -54,11 +54,11 @@
<button
{id}
class={[
'text-text flex size-7 appearance-none items-center',
'text-sui-text flex size-7 appearance-none items-center',
'justify-center rounded-lg shadow transition-all hover:opacity-75',
color === 'default' && 'bg-white',
color === 'contrast' && 'border-text/40 border bg-white',
!valid && 'border-accent-400 border'
!valid && 'border-sui-accent-400 border'
]}
onclick={() => {
if (value === false || value === 'indeterminate') {
@@ -79,14 +79,14 @@
{#if children}
<label
class={[
'text-text pl-4 font-medium transition-colors select-none',
!valid && 'text-accent-400'
'text-sui-text pl-4 font-medium transition-colors select-none',
!valid && 'text-sui-accent-400'
]}
for={id}
>
{@render children()}
{#if required}
<span class="text-accent-400">*</span>
<span class="text-sui-accent-400">*</span>
{/if}
</label>
{/if}

12
src/lib/Combobox.svelte
View File

@@ -253,8 +253,8 @@
class={[
'picker absolute top-0 left-0 z-50 overflow-y-auto px-2 py-3',
'rounded-sm border shadow-lg shadow-black/25 outline-hidden',
'border-accent dark:border-accent/50 dark:bg-text-800 bg-white dark:sm:bg-slate-800',
'text-text dark:text-background',
'border-sui-accent dark:border-sui-accent/50 dark:bg-sui-text-800 bg-white dark:sm:bg-slate-800',
'text-sui-text dark:text-sui-background',
open && pickerPosition === 'top' && 'mb-[var(--outer-gap)]',
open && pickerPosition === 'bottom' && 'mt-[var(--outer-gap)]'
]}
@@ -279,8 +279,8 @@
class={[
'picker-item options-center mb-0.5 flex min-h-10 flex-wrap py-2.5 pr-1.5 pl-5',
'rounded-sm text-sm capitalize outline-hidden select-none',
'hover:bg-accent-500/30 dark:hover:bg-accent-700/30',
item.value === highlighted?.value && 'bg-accent-500/80 dark:bg-accent-700/80'
'hover:bg-sui-accent-500/30 dark:hover:bg-sui-accent-700/30',
item.value === highlighted?.value && 'bg-sui-accent-500/80 dark:bg-sui-accent-700/80'
]}
role="option"
onclick={() => {
@@ -305,7 +305,7 @@
</div>
{#if item?.infotext}
<div class="text-text/80 dark:text-background/80 ml-auto text-sm">
<div class="text-sui-text/80 dark:text-sui-background/80 ml-auto text-sm">
{item.infotext}
</div>
{/if}
@@ -441,7 +441,7 @@
<div
class={[
'pointer-events-none absolute top-1/2 -translate-y-1/2 transform text-sm select-none',
'text-text/80 dark:text-background/80',
'text-sui-text/80 dark:text-sui-background/80',
caret ? 'end-10' : 'end-[1.125rem]'
]}
>

10
src/lib/DateInput.svelte
View File

@@ -210,9 +210,9 @@
bind:this={containerElement}
class={[
'inline-flex w-54 items-center justify-start gap-1',
'border-accent rounded-sm border bg-white px-[1.125rem] py-3.5 font-normal transition-colors',
'text-text dark:border-accent/50 dark:bg-text-800 dark:text-background dark:sm:bg-slate-800',
'ring-accent focus-within:ring-1',
'border-sui-accent rounded-sm border bg-white px-[1.125rem] py-3.5 font-normal transition-colors',
'text-sui-text dark:border-sui-accent/50 dark:bg-sui-text-800 dark:text-sui-background dark:sm:bg-slate-800',
'ring-sui-accent focus-within:ring-1',
!valid && 'border-red-500!'
]}
>
@@ -228,7 +228,7 @@
{@render snippet()}
{#if i < inputSnippets.length - 1}
<span class="text-text/60 dark:text-background/60">-</span>
<span class="text-sui-text/60 dark:text-sui-background/60">-</span>
{/if}
{/each}
@@ -314,7 +314,7 @@
@reference "./styles/theme.css";
.date-input {
@apply ring-accent dark:ring-accent/50 h-6 min-w-[1ch] outline-0 transition-all focus:ring-2;
@apply ring-sui-accent dark:ring-sui-accent/50 h-6 min-w-[1ch] outline-0 transition-all focus:ring-2;
}
.date-input.invalid {
@apply ring-red-500!;

2
src/lib/FramelessButton.svelte
View File

@@ -27,7 +27,7 @@
<button
class={[
'text-accent hover:text-primary inline-flex cursor-pointer items-center gap-1.5 transition-colors',
'text-sui-accent hover:text-sui-primary inline-flex cursor-pointer items-center gap-1.5 transition-colors',
disabled && 'pointer-events-none cursor-not-allowed opacity-50',
classValue
]}

2
src/lib/Label.svelte
View File

@@ -19,7 +19,7 @@
'transition-fontColor block',
error && !bigError
? 'mt-1 text-sm font-normal text-red-500'
: 'text-text dark:text-background mb-2 text-base font-medium',
: 'text-sui-text dark:text-sui-background mb-2 text-base font-medium',
bigError && 'text-red-500!',
classValue
]}

2
src/lib/Link.svelte
View File

@@ -49,7 +49,7 @@
<a
class={[
'text-accent hover:text-primary inline-flex items-center gap-1.5 transition-colors',
'text-sui-accent hover:text-sui-primary inline-flex items-center gap-1.5 transition-colors',
disabled && 'pointer-events-none cursor-not-allowed opacity-50',
classValue
]}

6
src/lib/PinInput.svelte
View File

@@ -180,9 +180,9 @@
class={[
'px[1.125rem] w-[5ch] rounded-sm pt-4 pb-3.5 transition-colors',
'text-center align-middle font-mono font-normal placeholder:font-normal',
'border-accent dark:border-accent/50 border',
'text-text placeholder:text-text/30 dark:text-background dark:placeholder:text-background/30',
'dark:bg-text-800 bg-white dark:sm:bg-slate-800',
'border-sui-accent dark:border-sui-accent/50 border',
'text-sui-text placeholder:text-sui-text/30 dark:text-sui-background dark:placeholder:text-sui-background/30',
'dark:bg-sui-text-800 bg-white dark:sm:bg-slate-800',
!valid && i >= value.length && 'border-red-500!'
]}
value={value[i] || ''}

6
src/lib/RadioGroup.svelte
View File

@@ -37,19 +37,19 @@
{#each options as opt}
{@const item = group.getItem(getValue(opt))}
<div
class="ring-accent-500 group -ml-1 flex items-center gap-3 rounded p-1 outline-hidden focus-visible:ring-3
class="ring-sui-accent-500 group -ml-1 flex items-center gap-3 rounded p-1 outline-hidden focus-visible:ring-3
data-disabled:cursor-not-allowed data-disabled:opacity-50"
{...item.attrs}
>
<div
class="group-aria-[checked]:border-accent-500 dark:hover:bg-text-800 relative size-6
class="group-aria-[checked]:border-sui-accent-500 dark:hover:bg-sui-text-800 relative size-6
rounded-full border-2 border-neutral-400 bg-neutral-100 shadow-sm
group-aria-[checke]:bg-transparent hover:bg-gray-100 data-[disabled=true]:bg-gray-400
dark:border-white dark:bg-transparent dark:sm:hover:bg-slate-800"
>
{#if item.checked}
<div
class="group-aria-[checked]:bg-accent-500 absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2
class="group-aria-[checked]:bg-sui-accent-500 absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2
rounded-full"
aria-hidden="true"
transition:scale={{ duration: 75 }}

14
src/lib/StateMachine.svelte
View File

@@ -312,8 +312,8 @@
<div
class="relative flex h-6 w-7 items-center justify-center rounded-3xl bg-white
text-sm dark:bg-slate-600 {index === i
? 'bg-accent-500! text-background dark:bg-accent-700!'
: ''} {i < index ? 'text-background bg-green-600!' : ''} {i > index
? 'bg-sui-accent-500! text-sui-background dark:bg-sui-accent-700!'
: ''} {i < index ? 'text-sui-background bg-green-600!' : ''} {i > index
? 'scale-[0.85] opacity-80'
: ''}
transition-[transform,background-color,color]"
@@ -334,7 +334,7 @@
<!-- Back button -->
{#if backButtonVisible}
<button
class="text-text hover:text-text-700 dark:text-background dark:hover:text-background/80 flex cursor-pointer items-center
class="text-sui-text hover:text-sui-text-700 dark:text-sui-background dark:hover:text-sui-background/80 flex cursor-pointer items-center
gap-2.5 font-medium transition-colors"
onclick={() => (index -= 1)}
transition:fly={{ x: -200, duration: 200 }}
@@ -378,7 +378,7 @@
<div
class={[
'absolute inset-0 backdrop-blur-md transition-colors',
hero.colour === 'light' ? 'bg-accent/80' : 'bg-[#00283C]/80'
hero.colour === 'light' ? 'bg-sui-accent/80' : 'bg-[#00283C]/80'
]}
></div>
@@ -407,7 +407,7 @@
<!-- Form page -->
{#key index}
<div
class="text-text dark:text-background absolute top-0 right-0 left-0"
class="text-sui-text dark:text-sui-background absolute top-0 right-0 left-0"
in:flyIn
out:flyOut
bind:this={pageContainer}
@@ -448,7 +448,7 @@
.progress {
@apply flex cursor-default items-center justify-center gap-3 overflow-hidden rounded-3xl px-3 py-2;
@apply dark:bg-text-800 bg-gray-200/80 dark:lg:bg-slate-800;
@apply text-text/60 dark:text-background/60 font-semibold;
@apply dark:bg-sui-text-800 bg-gray-200/80 dark:lg:bg-slate-800;
@apply text-sui-text/60 dark:text-sui-background/60 font-semibold;
}
</style>

6
src/lib/StyledRawInput.svelte
View File

@@ -44,9 +44,9 @@
{...others}
bind:value
class={[
'border-accent w-full rounded-sm border bg-white px-[1.125rem] py-3.5 font-normal transition-colors',
'text-text placeholder:text-text/60 dark:border-accent/50 dark:bg-text-800 placeholder:font-normal',
'dark:text-background dark:placeholder:text-background/60 dark:sm:bg-slate-800',
'border-sui-accent w-full rounded-sm border bg-white px-[1.125rem] py-3.5 font-normal transition-colors',
'text-sui-text placeholder:text-sui-text/60 dark:border-sui-accent/50 dark:bg-sui-text-800 placeholder:font-normal',
'dark:text-sui-background dark:placeholder:text-sui-background/60 dark:sm:bg-slate-800',
'placeholder-shown:text-ellipsis',
!valid && 'border-red-500!',
others.class

4
src/lib/TimeInput.svelte
View File

@@ -380,10 +380,10 @@
}
.ampm {
@apply border-accent dark:border-accent/50 cursor-pointer px-3 py-1 font-medium;
@apply border-sui-accent dark:border-sui-accent/50 cursor-pointer px-3 py-1 font-medium;
&.selected {
@apply bg-accent text-background dark:bg-accent/30 dark:text-background/90 ring-text ring-1 dark:ring-blue-300;
@apply bg-sui-accent text-sui-background dark:bg-sui-accent/30 dark:text-sui-background/90 ring-sui-text ring-1 dark:ring-blue-300;
}
}
</style>

4
src/lib/ToggleSelect.svelte
View File

@@ -28,8 +28,8 @@
class={[
'rounded-3xl border px-6 py-2.5 font-medium transition-colors',
selected
? 'border-secondary bg-primary text-background hover:bg-primary-600'
: 'border-accent text-text dark:border-accent/50 dark:bg-text dark:text-background dark:hover:bg-text-900 bg-white hover:bg-slate-100',
? 'border-secondary bg-sui-primary text-sui-background hover:bg-sui-primary-600'
: 'border-sui-accent text-sui-text dark:border-sui-accent/50 dark:bg-sui-text dark:text-sui-background dark:hover:bg-sui-text-900 bg-white hover:bg-slate-100',
classValue
]}
onclick={handleToggleSelectClick}

100
src/lib/styles/theme.css
View File

@@ -25,63 +25,63 @@
);
/* Primary Colors */
--color-primary-50: var(--ui-primary-50, #f0f8fe);
--color-primary-100: var(--ui-primary-100, #ddeefc);
--color-primary-200: var(--ui-primary-200, #c2e3fb);
--color-primary-300: var(--ui-primary-300, #98d2f8);
--color-primary-400: var(--ui-primary-400, #68b9f2);
--color-primary-500: var(--ui-primary-500, #459bec);
--color-primary-600: var(--ui-primary-600, #2f80e1);
--color-primary-700: var(--ui-primary-700, #2463c1);
--color-primary-800: var(--ui-primary-800, #2556a8);
--color-primary-900: var(--ui-primary-900, #234b85);
--color-primary-950: var(--ui-primary-950, #1a2f51);
--color-primary: var(--ui-primary, #2463c1);
--color-sui-primary-50: var(--ui-primary-50, #f0f8fe);
--color-sui-primary-100: var(--ui-primary-100, #ddeefc);
--color-sui-primary-200: var(--ui-primary-200, #c2e3fb);
--color-sui-primary-300: var(--ui-primary-300, #98d2f8);
--color-sui-primary-400: var(--ui-primary-400, #68b9f2);
--color-sui-primary-500: var(--ui-primary-500, #459bec);
--color-sui-primary-600: var(--ui-primary-600, #2f80e1);
--color-sui-primary-700: var(--ui-primary-700, #2463c1);
--color-sui-primary-800: var(--ui-primary-800, #2556a8);
--color-sui-primary-900: var(--ui-primary-900, #234b85);
--color-sui-primary-950: var(--ui-primary-950, #1a2f51);
--color-sui-primary: var(--ui-primary, #2463c1);
/* Secondary Colors */
--color-secondary-50: var(--ui-secondary-50, #f2f7fc);
--color-secondary-100: var(--ui-secondary-100, #e1edf8);
--color-secondary-200: var(--ui-secondary-200, #cbe0f2);
--color-secondary-300: var(--ui-secondary-300, #a7cce9);
--color-secondary-400: var(--ui-secondary-400, #7cb1de);
--color-secondary-500: var(--ui-secondary-500, #5d95d4);
--color-secondary-600: var(--ui-secondary-600, #487bc6);
--color-secondary-700: var(--ui-secondary-700, #3f69b6);
--color-secondary-800: var(--ui-secondary-800, #395694);
--color-secondary-900: var(--ui-secondary-900, #324a76);
--color-secondary-950: var(--ui-secondary-950, #222f49);
--color-secondary: var(--ui-secondary, #487bc6);
--color-sui-secondary-50: var(--ui-secondary-50, #f2f7fc);
--color-sui-secondary-100: var(--ui-secondary-100, #e1edf8);
--color-sui-secondary-200: var(--ui-secondary-200, #cbe0f2);
--color-sui-secondary-300: var(--ui-secondary-300, #a7cce9);
--color-sui-secondary-400: var(--ui-secondary-400, #7cb1de);
--color-sui-secondary-500: var(--ui-secondary-500, #5d95d4);
--color-sui-secondary-600: var(--ui-secondary-600, #487bc6);
--color-sui-secondary-700: var(--ui-secondary-700, #3f69b6);
--color-sui-secondary-800: var(--ui-secondary-800, #395694);
--color-sui-secondary-900: var(--ui-secondary-900, #324a76);
--color-sui-secondary-950: var(--ui-secondary-950, #222f49);
--color-sui-secondary: var(--ui-secondary, #487bc6);
/* Accent Colors */
--color-accent-50: var(--ui-accent-50, #f0f9ff);
--color-accent-100: var(--ui-accent-100, #e1f2fd);
--color-accent-200: var(--ui-accent-200, #bbe7fc);
--color-accent-300: var(--ui-accent-300, #7fd3fa);
--color-accent-400: var(--ui-accent-400, #3cbef4);
--color-accent-500: var(--ui-accent-500, #12a5e5);
--color-accent-600: var(--ui-accent-600, #068cce);
--color-accent-700: var(--ui-accent-700, #066a9e);
--color-accent-800: var(--ui-accent-800, #095983);
--color-accent-900: var(--ui-accent-900, #0e4b6c);
--color-accent-950: var(--ui-accent-950, #093048);
--color-accent: var(--ui-accent, #068cce);
--color-sui-accent-50: var(--ui-accent-50, #f0f9ff);
--color-sui-accent-100: var(--ui-accent-100, #e1f2fd);
--color-sui-accent-200: var(--ui-accent-200, #bbe7fc);
--color-sui-accent-300: var(--ui-accent-300, #7fd3fa);
--color-sui-accent-400: var(--ui-accent-400, #3cbef4);
--color-sui-accent-500: var(--ui-accent-500, #12a5e5);
--color-sui-accent-600: var(--ui-accent-600, #068cce);
--color-sui-accent-700: var(--ui-accent-700, #066a9e);
--color-sui-accent-800: var(--ui-accent-800, #095983);
--color-sui-accent-900: var(--ui-accent-900, #0e4b6c);
--color-sui-accent-950: var(--ui-accent-950, #093048);
--color-sui-accent: var(--ui-accent, #068cce);
/* Text Colors */
--color-text-50: var(--ui-text-50, #f6f6f6);
--color-text-100: var(--ui-text-100, #e7e7e7);
--color-text-200: var(--ui-text-200, #d1d1d1);
--color-text-300: var(--ui-text-300, #b0b0b0);
--color-text-400: var(--ui-text-400, #888888);
--color-text-500: var(--ui-text-500, #6d6d6d);
--color-text-600: var(--ui-text-600, #5d5d5d);
--color-text-700: var(--ui-text-700, #4f4f4f);
--color-text-800: var(--ui-text-800, #454545);
--color-text-900: var(--ui-text-900, #3d3d3d);
--color-text-950: var(--ui-text-950, #2a2a2a);
--color-text: var(--ui-text, #2a2a2a);
--color-sui-text-50: var(--ui-text-50, #f6f6f6);
--color-sui-text-100: var(--ui-text-100, #e7e7e7);
--color-sui-text-200: var(--ui-text-200, #d1d1d1);
--color-sui-text-300: var(--ui-text-300, #b0b0b0);
--color-sui-text-400: var(--ui-text-400, #888888);
--color-sui-text-500: var(--ui-text-500, #6d6d6d);
--color-sui-text-600: var(--ui-text-600, #5d5d5d);
--color-sui-text-700: var(--ui-text-700, #4f4f4f);
--color-sui-text-800: var(--ui-text-800, #454545);
--color-sui-text-900: var(--ui-text-900, #3d3d3d);
--color-sui-text-950: var(--ui-text-950, #2a2a2a);
--color-sui-text: var(--ui-text, #2a2a2a);
/* Background */
--color-background: var(--ui-background, #f2efec);
--color-sui-background: var(--ui-background, #f2efec);
/* Shadows */
--shadow-centre: var(--ui-shadow-centre, 0 0 80px -6px rgb(0 0 0 / 0.25));
@@ -100,6 +100,6 @@
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
border-color: var(--color-sui-gray-200, currentcolor);
}
}