granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix ui components svelte 5 compatibility

Browse source
This commit is contained in:
Justin Edmund 2025-09-16 20:10:04 -07:00
parent cc46a695d5
commit 1c5caccf5e
5 changed files with 325 additions and 326 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

579
src/lib/components/ui/button/button.module.scss
View file

@ -1,3 +1,4 @@
@use 'sass:color';
@use 'themes/spacing'; @use 'themes/spacing';
@use 'themes/mixins'; @use 'themes/mixins';
@use 'themes/colors'; @use 'themes/colors';
@ -6,445 +7,447 @@
@use 'themes/layout'; @use 'themes/layout';
.button { .button {
align-items: center; align-items: center;
background: var(--button-bg); background: var(--button-bg);
border: 2px solid transparent; border: 2px solid transparent;
border-radius: layout.$input-corner; border-radius: layout.$input-corner;
color: var(--button-text); color: var(--button-text);
display: inline-flex; display: inline-flex;
font-size: typography.$font-button; font-size: typography.$font-button;
font-weight: typography.$normal; font-weight: typography.$normal;
justify-content: center; justify-content: center;
gap: 6px; gap: 6px;
transition: 0.18s opacity ease-in-out; transition: 0.18s opacity ease-in-out;
user-select: none; user-select: none;
transition: background-color 0.18s ease-out, color 0.18s ease-out; transition:
cursor: pointer; background-color 0.18s ease-out,
outline: none; color 0.18s ease-out;
position: relative; cursor: pointer;
white-space: nowrap; outline: none;
text-decoration: none; position: relative;
line-height: 1; white-space: nowrap;
text-decoration: none;
line-height: 1;
.text { .text {
align-items: center; align-items: center;
color: inherit; color: inherit;
display: flex; display: flex;
} }
&:hover, &:hover,
&.blended:hover, &.blended:hover,
&.blended.active { &.blended.active {
background: var(--button-bg-hover); background: var(--button-bg-hover);
cursor: pointer; cursor: pointer;
color: var(--button-text-hover); color: var(--button-text-hover);
.accessory svg { .accessory svg {
fill: var(--button-text-hover); fill: var(--button-text-hover);
} }
.accessory svg.stroke { .accessory svg.stroke {
fill: none; fill: none;
stroke: var(--button-text-hover); stroke: var(--button-text-hover);
} }
} }
&:disabled { &:disabled {
background-color: var(--button-bg-disabled); background-color: var(--button-bg-disabled);
color: var(--button-text-disabled); color: var(--button-text-disabled);
cursor: not-allowed; cursor: not-allowed;
opacity: 0.5; opacity: 0.5;
&:hover { &:hover {
background-color: var(--button-bg-disabled); background-color: var(--button-bg-disabled);
color: var(--button-text-disabled); color: var(--button-text-disabled);
cursor: not-allowed; cursor: not-allowed;
} }
} }
&:focus-visible { &:focus-visible {
border: 2px solid colors.$blue; border: 2px solid colors.$blue;
outline: none; outline: none;
} }
&:active:not(:disabled) { &:active:not(:disabled) {
transform: translateY(1px); transform: translateY(1px);
} }
} }
// Variants // Variants
.primary { .primary {
background-color: var(--button-contained-bg); background-color: var(--button-contained-bg);
color: var(--button-text); color: var(--button-text);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--button-contained-bg-hover); background-color: var(--button-contained-bg-hover);
} }
} }
.secondary { .secondary {
background-color: var(--button-bg); background-color: var(--button-bg);
color: var(--button-text); color: var(--button-text);
border: 1px solid var(--separator-bg); border: 1px solid var(--separator-bg);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--button-bg-hover); background-color: var(--button-bg-hover);
color: var(--button-text-hover); color: var(--button-text-hover);
} }
} }
.ghost { .ghost {
background-color: transparent; background-color: transparent;
color: var(--text-secondary); color: var(--text-secondary);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--button-bg); background-color: var(--button-bg);
color: var(--text-primary); color: var(--text-primary);
} }
} }
.text { .text {
background-color: transparent; background-color: transparent;
color: var(--accent-blue); color: var(--accent-blue);
padding: 0; padding: 0;
min-height: auto; min-height: auto;
&:hover:not(:disabled) { &:hover:not(:disabled) {
color: var(--accent-blue-focus); color: var(--accent-blue-focus);
text-decoration: underline; text-decoration: underline;
} }
&:active:not(:disabled) { &:active:not(:disabled) {
transform: none; transform: none;
} }
} }
.blended { .blended {
background: transparent; background: transparent;
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: var(--button-bg-hover); background: var(--button-bg-hover);
} }
} }
.bound { .bound {
background: var(--button-contained-bg); background: var(--button-contained-bg);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: var(--button-contained-bg-hover); background: var(--button-contained-bg-hover);
} }
&.save:hover .accessory svg { &.save:hover .accessory svg {
fill: colors.$save-red; fill: colors.$save-red;
stroke: colors.$save-red; stroke: colors.$save-red;
} }
&.save { &.save {
color: colors.$save-red; color: colors.$save-red;
&.active .accessory svg { &.active .accessory svg {
fill: colors.$save-red; fill: colors.$save-red;
stroke: colors.$save-red; stroke: colors.$save-red;
} }
&:hover { &:hover {
color: darken(colors.$save-red, 30); color: color.adjust(colors.$save-red, $lightness: -30%);
.accessory svg { .accessory svg {
fill: darken(colors.$save-red, 30); fill: color.adjust(colors.$save-red, $lightness: -30%);
stroke: darken(colors.$save-red, 30); stroke: color.adjust(colors.$save-red, $lightness: -30%);
} }
} }
} }
} }
.bound.blended { .bound.blended {
background: var(--dialog-bg); background: var(--dialog-bg);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: var(--input-bound-bg); background: var(--input-bound-bg);
} }
} }
.floating { .floating {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
opacity: 0; opacity: 0;
z-index: 99; z-index: 99;
} }
.destructive { .destructive {
background: colors.$error; background: colors.$error;
color: white; color: white;
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: darken(colors.$error, 15); background: color.adjust(colors.$error, $lightness: -15%);
} }
@include mixins.breakpoint(phone) { @include mixins.breakpoint(phone) {
background: colors.$error; background: colors.$error;
color: colors.$grey-100; color: colors.$grey-100;
.accessory svg { .accessory svg {
fill: colors.$grey-100; fill: colors.$grey-100;
} }
} }
} }
.notice { .notice {
background-color: var(--notice-button-bg); background-color: var(--notice-button-bg);
color: var(--notice-button-text); color: var(--notice-button-text);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--notice-button-bg-hover); background-color: var(--notice-button-bg-hover);
} }
} }
.modal { .modal {
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: colors.$grey-90; background: colors.$grey-90;
} }
&.destructive { &.destructive {
color: colors.$error; color: colors.$error;
&:hover:not(:disabled) { &:hover:not(:disabled) {
color: darken(colors.$error, 10); color: color.adjust(colors.$error, $lightness: -10%);
} }
} }
} }
// Modifiers // Modifiers
.full { .full {
width: 100%; width: 100%;
} }
.fullWidth { .fullWidth {
width: 100%; width: 100%;
} }
.grow { .grow {
flex-grow: 1; flex-grow: 1;
} }
.no-shrink { .no-shrink {
flex-shrink: 0; flex-shrink: 0;
} }
.active { .active {
background: var(--button-bg-hover); background: var(--button-bg-hover);
color: var(--button-text-hover); color: var(--button-text-hover);
} }
// Sizes // Sizes
.icon { .icon {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
padding: spacing.$unit * 1.5; padding: spacing.$unit * 1.5;
height: 44px; height: 44px;
width: 44px; width: 44px;
.text { .text {
display: none; display: none;
@include mixins.breakpoint(tablet) { @include mixins.breakpoint(tablet) {
display: block; display: block;
} }
@include mixins.breakpoint(phone) { @include mixins.breakpoint(phone) {
display: block; display: block;
} }
} }
} }
.small { .small {
padding: spacing.$unit spacing.$unit-2x; padding: spacing.$unit spacing.$unit-2x;
font-size: typography.$font-small; font-size: typography.$font-small;
min-height: 28px; min-height: 28px;
&.iconOnly { &.iconOnly {
padding: spacing.$unit; padding: spacing.$unit;
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
} }
.medium { .medium {
height: spacing.$unit * 5.5; height: spacing.$unit * 5.5;
padding: (spacing.$unit * 1.5) spacing.$unit-2x; padding: (spacing.$unit * 1.5) spacing.$unit-2x;
font-size: typography.$font-regular; font-size: typography.$font-regular;
&.iconOnly { &.iconOnly {
padding: spacing.$unit * 1.5; padding: spacing.$unit * 1.5;
width: 44px; width: 44px;
height: 44px; height: 44px;
} }
} }
.large { .large {
font-size: typography.$font-large; font-size: typography.$font-large;
padding: spacing.$unit-2x spacing.$unit-3x; padding: spacing.$unit-2x spacing.$unit-3x;
min-height: 52px; min-height: 52px;
&.iconOnly { &.iconOnly {
padding: spacing.$unit-2x; padding: spacing.$unit-2x;
width: 52px; width: 52px;
height: 52px; height: 52px;
} }
} }
// Special features // Special features
.save { .save {
.accessory svg { .accessory svg {
fill: none; fill: none;
stroke: var(--button-text); stroke: var(--button-text);
} }
&.saved { &.saved {
color: colors.$save-red; color: colors.$save-red;
.accessory svg { .accessory svg {
fill: colors.$save-red; fill: colors.$save-red;
stroke: colors.$save-red; stroke: colors.$save-red;
} }
&:hover:not(:disabled) { &:hover:not(:disabled) {
color: colors.$save-red; color: colors.$save-red;
.accessory svg { .accessory svg {
fill: none; fill: none;
stroke: colors.$save-red; stroke: colors.$save-red;
} }
} }
} }
&:hover:not(:disabled) { &:hover:not(:disabled) {
color: colors.$save-red; color: colors.$save-red;
.accessory svg { .accessory svg {
fill: colors.$save-red; fill: colors.$save-red;
stroke: colors.$save-red; stroke: colors.$save-red;
} }
} }
} }
// Element colors // Element colors
.wind { .wind {
background: var(--wind-bg); background: var(--wind-bg);
color: var(--wind-text-contrast); color: var(--wind-text-contrast);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: var(--wind-bg-hover); background: var(--wind-bg-hover);
color: var(--wind-text-hover); color: var(--wind-text-hover);
} }
} }
.fire { .fire {
background: var(--fire-bg); background: var(--fire-bg);
color: var(--fire-text-contrast); color: var(--fire-text-contrast);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: var(--fire-bg-hover); background: var(--fire-bg-hover);
color: var(--fire-text-hover); color: var(--fire-text-hover);
} }
} }
.water { .water {
background: var(--water-bg); background: var(--water-bg);
color: var(--water-text-contrast); color: var(--water-text-contrast);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: var(--water-bg-hover); background: var(--water-bg-hover);
color: var(--water-text-hover); color: var(--water-text-hover);
} }
} }
.earth { .earth {
background: var(--earth-bg); background: var(--earth-bg);
color: var(--earth-text-contrast); color: var(--earth-text-contrast);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: var(--earth-bg-hover); background: var(--earth-bg-hover);
color: var(--earth-text-hover); color: var(--earth-text-hover);
} }
} }
.dark { .dark {
background: var(--dark-bg); background: var(--dark-bg);
color: var(--dark-text-contrast); color: var(--dark-text-contrast);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: var(--dark-bg-hover); background: var(--dark-bg-hover);
color: var(--dark-text-hover); color: var(--dark-text-hover);
} }
} }
.light { .light {
background: var(--light-bg); background: var(--light-bg);
color: var(--light-text-contrast); color: var(--light-text-contrast);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: var(--light-bg-hover); background: var(--light-bg-hover);
color: var(--light-text-hover); color: var(--light-text-hover);
} }
} }
// Icon-only specific // Icon-only specific
.iconOnly { .iconOnly {
gap: 0; gap: 0;
aspect-ratio: 1; aspect-ratio: 1;
} }
// Accessories // Accessories
.accessory { .accessory {
$dimension: spacing.$unit-2x; $dimension: spacing.$unit-2x;
display: flex; display: flex;
align-items: center; align-items: center;
&.arrow { &.arrow {
margin-top: spacing.$unit-half; margin-top: spacing.$unit-half;
} }
&.flipped { &.flipped {
transform: rotate(180deg); transform: rotate(180deg);
} }
svg { svg {
fill: var(--button-text); fill: var(--button-text);
height: $dimension; height: $dimension;
width: $dimension; width: $dimension;
&.stroke { &.stroke {
fill: none; fill: none;
stroke: var(--button-text); stroke: var(--button-text);
} }
&.Add { &.Add {
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
&.Check { &.Check {
height: 22px; height: 22px;
width: 22px; width: 22px;
} }
} }
&.check svg { &.check svg {
margin-top: 1px; margin-top: 1px;
height: 14px; height: 14px;
width: auto; width: auto;
} }
&.settings svg { &.settings svg {
height: 13px; height: 13px;
width: 13px; width: 13px;
} }
} }
// CSS modules workaround for floating button behavior // CSS modules workaround for floating button behavior
:global(.unit:hover) .floating, :global(.unit:hover) .floating,
:global(.unit) .floating.active { :global(.unit) .floating.active {
pointer-events: initial; pointer-events: initial;
opacity: 1; opacity: 1;
} }

17
src/lib/components/ui/checkbox/Checkbox.svelte
View file

@ -1,8 +1,8 @@
<!-- Checkbox Component --> <!-- Checkbox Component -->
<svelte:options runes={true} />
<script lang="ts"> <script lang="ts">
import { Checkbox as CheckboxPrimitive } from 'bits-ui'; import { Checkbox as CheckboxPrimitive } from 'bits-ui';
import { Check, Minus } from 'lucide-svelte'; import { Check, Minus } from 'lucide-svelte';
import { cn } from '$lib/utils.js';
import styles from './checkbox.module.scss'; import styles from './checkbox.module.scss';
import type { HTMLButtonAttributes } from 'svelte/elements'; import type { HTMLButtonAttributes } from 'svelte/elements';
@ -31,9 +31,11 @@
...restProps ...restProps
}: Props = $props(); }: Props = $props();
$: if (onCheckedChange && checked !== undefined) { $effect(() => {
onCheckedChange(checked); if (onCheckedChange && checked !== undefined) {
} onCheckedChange(checked);
}
});
const sizeClasses = { const sizeClasses = {
small: styles.small, small: styles.small,
@ -53,12 +55,7 @@
{required} {required}
{name} {name}
{value} {value}
class={cn( class={`${styles.checkbox} ${sizeClasses[size]} ${variantClasses[variant]} ${className || ''}`}
styles.checkbox,
sizeClasses[size],
variantClasses[variant],
className
)}
{...restProps} {...restProps}
> >
<CheckboxPrimitive.Indicator class={styles.indicator}> <CheckboxPrimitive.Indicator class={styles.indicator}>

14
src/lib/components/ui/segmented-control/Segment.svelte
View file

@ -1,7 +1,7 @@
<!-- Segment Component --> <!-- Segment Component -->
<svelte:options runes={true} />
<script lang="ts"> <script lang="ts">
import { RadioGroup as RadioGroupPrimitive } from 'bits-ui'; import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
import styles from './segment.module.scss'; import styles from './segment.module.scss';
import type { HTMLButtonAttributes } from 'svelte/elements'; import type { HTMLButtonAttributes } from 'svelte/elements';
@ -13,16 +13,20 @@
let { let {
value, value,
class: className, class: className,
children, children: content,
...restProps ...restProps
}: Props = $props(); }: Props = $props();
</script> </script>
<RadioGroupPrimitive.Item <RadioGroupPrimitive.Item
{value} {value}
class={cn(styles.segment, className)} class={`${styles.segment} ${className || ''}`}
{...restProps} {...restProps}
> >
<RadioGroupPrimitive.ItemIndicator class={styles.indicator} /> {#snippet children({ checked })}
<span class={styles.label}>{children}</span> {#if checked}
<div class={styles.indicator}></div>
{/if}
<span class={styles.label}>{@render content?.()}</span>
{/snippet}
</RadioGroupPrimitive.Item> </RadioGroupPrimitive.Item>

25
src/lib/components/ui/segmented-control/SegmentedControl.svelte
View file

@ -1,7 +1,7 @@
<!-- SegmentedControl Component --> <!-- SegmentedControl Component -->
<svelte:options runes={true} />
<script lang="ts"> <script lang="ts">
import { RadioGroup as RadioGroupPrimitive } from 'bits-ui'; import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
import styles from './segmented-control.module.scss'; import styles from './segmented-control.module.scss';
import type { HTMLDivAttributes } from 'svelte/elements'; import type { HTMLDivAttributes } from 'svelte/elements';
@ -29,9 +29,11 @@
...restProps ...restProps
}: Props = $props(); }: Props = $props();
$: if (onValueChange && value !== undefined) { $effect(() => {
onValueChange(value); if (onValueChange && value !== undefined) {
} onValueChange(value);
}
});
const variantClasses = { const variantClasses = {
default: '', default: '',
@ -49,21 +51,12 @@
}; };
</script> </script>
<div class={cn(styles.wrapper, wrapperClass)}> <div class={`${styles.wrapper} ${wrapperClass || ''}`}>
<RadioGroupPrimitive.Root <RadioGroupPrimitive.Root
bind:value bind:value
class={cn( class={`${styles.segmentedControl} ${variantClasses[variant]} ${element ? elementClasses[element] : ''} ${grow ? styles.grow : ''} ${gap ? styles.gap : ''} ${className || ''}`}
styles.segmentedControl,
variantClasses[variant],
element && elementClasses[element],
{
[styles.grow]: grow,
[styles.gap]: gap
},
className
)}
{...restProps} {...restProps}
> >
{children} {@render children?.()}
</RadioGroupPrimitive.Root> </RadioGroupPrimitive.Root>
</div> </div>

14
src/lib/components/ui/switch/Switch.svelte
View file

@ -1,7 +1,7 @@
<!-- Switch Component --> <!-- Switch Component -->
<svelte:options runes={true} />
<script lang="ts"> <script lang="ts">
import { Switch as SwitchPrimitive } from 'bits-ui'; import { Switch as SwitchPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
import styles from './switch.module.scss'; import styles from './switch.module.scss';
import type { HTMLButtonAttributes } from 'svelte/elements'; import type { HTMLButtonAttributes } from 'svelte/elements';
@ -28,9 +28,11 @@
...restProps ...restProps
}: Props = $props(); }: Props = $props();
$: if (onCheckedChange && checked !== undefined) { $effect(() => {
onCheckedChange(checked); if (onCheckedChange && checked !== undefined) {
} onCheckedChange(checked);
}
});
</script> </script>
<SwitchPrimitive.Root <SwitchPrimitive.Root
@ -39,8 +41,8 @@
{required} {required}
{name} {name}
{value} {value}
class={cn(styles.switch, className)} class={`${styles.switch} ${className || ''}`}
{...restProps} {...restProps}
> >
<SwitchPrimitive.Thumb class={cn(styles.thumb, thumbClass)} /> <SwitchPrimitive.Thumb class={`${styles.thumb} ${thumbClass || ''}`} />
</SwitchPrimitive.Root> </SwitchPrimitive.Root>