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

10
src/lib/Checkbox.svelte
View File

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

12
src/lib/Combobox.svelte
View File

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

10
src/lib/DateInput.svelte
View File

@@ -210,9 +210,9 @@
bind:this={containerElement} bind:this={containerElement}
class={[ class={[
'inline-flex w-54 items-center justify-start gap-1', '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', 'border-sui-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', 'text-sui-text dark:border-sui-accent/50 dark:bg-sui-text-800 dark:text-sui-background dark:sm:bg-slate-800',
'ring-accent focus-within:ring-1', 'ring-sui-accent focus-within:ring-1',
!valid && 'border-red-500!' !valid && 'border-red-500!'
]} ]}
> >
@@ -228,7 +228,7 @@
{@render snippet()} {@render snippet()}
{#if i < inputSnippets.length - 1} {#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} {/if}
{/each} {/each}
@@ -314,7 +314,7 @@
@reference "./styles/theme.css"; @reference "./styles/theme.css";
.date-input { .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 { .date-input.invalid {
@apply ring-red-500!; @apply ring-red-500!;

2
src/lib/FramelessButton.svelte
View File

@@ -27,7 +27,7 @@
<button <button
class={[ 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', disabled && 'pointer-events-none cursor-not-allowed opacity-50',
classValue classValue
]} ]}

2
src/lib/Label.svelte
View File

@@ -19,7 +19,7 @@
'transition-fontColor block', 'transition-fontColor block',
error && !bigError error && !bigError
? 'mt-1 text-sm font-normal text-red-500' ? '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!', bigError && 'text-red-500!',
classValue classValue
]} ]}

2
src/lib/Link.svelte
View File

@@ -49,7 +49,7 @@
<a <a
class={[ 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', disabled && 'pointer-events-none cursor-not-allowed opacity-50',
classValue classValue
]} ]}

6
src/lib/PinInput.svelte
View File

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

6
src/lib/RadioGroup.svelte
View File

@@ -37,19 +37,19 @@
{#each options as opt} {#each options as opt}
{@const item = group.getItem(getValue(opt))} {@const item = group.getItem(getValue(opt))}
<div <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" data-disabled:cursor-not-allowed data-disabled:opacity-50"
{...item.attrs} {...item.attrs}
> >
<div <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 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 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" dark:border-white dark:bg-transparent dark:sm:hover:bg-slate-800"
> >
{#if item.checked} {#if item.checked}
<div <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" rounded-full"
aria-hidden="true" aria-hidden="true"
transition:scale={{ duration: 75 }} transition:scale={{ duration: 75 }}

14
src/lib/StateMachine.svelte
View File

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

6
src/lib/StyledRawInput.svelte
View File

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

4
src/lib/TimeInput.svelte
View File

@@ -380,10 +380,10 @@
} }
.ampm { .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 { &.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> </style>

4
src/lib/ToggleSelect.svelte
View File

@@ -28,8 +28,8 @@
class={[ class={[
'rounded-3xl border px-6 py-2.5 font-medium transition-colors', 'rounded-3xl border px-6 py-2.5 font-medium transition-colors',
selected selected
? 'border-secondary bg-primary text-background hover:bg-primary-600' ? 'border-secondary bg-sui-primary text-sui-background hover:bg-sui-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-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 classValue
]} ]}
onclick={handleToggleSelectClick} onclick={handleToggleSelectClick}

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

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