Skip to content

style: align demo radius/opacity with COSS design system #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jettonn merged 1 commit into from
Jul 13, 2026
Merged

style: align demo radius/opacity with COSS design system #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/checkboxes/Checkbox18.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const items = ref([
<label
v-for="item in items"
:key="item.id"
class="relative flex size-9 cursor-pointer flex-col items-center justify-center gap-3 rounded-full border border-input text-center shadow-xs shadow-black/[.04] ring-offset-background transition-colors has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary has-data-[state=checked]:text-primary-foreground has-data-disabled:opacity-50 has-focus-visible:ring-2 has-focus-visible:ring-ring/70 has-focus-visible:ring-offset-2"
class="relative flex size-9 cursor-pointer flex-col items-center justify-center gap-3 rounded-full border border-input text-center shadow-xs shadow-black/[.04] ring-offset-background transition-colors has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary has-data-[state=checked]:text-primary-foreground has-data-disabled:opacity-64 has-focus-visible:ring-2 has-focus-visible:ring-ring/70 has-focus-visible:ring-offset-2"
>
<Checkbox
:id="item.id"
Expand Down
2 changes: 1 addition & 1 deletion src/components/dialogs/Dialog09.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ import { Mail } from 'lucide-vue-next'
<div class="relative">
<Input id="dialog-09" class="peer ps-9" placeholder="hi@yourcompany.com" type="email" />
<div
class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50"
class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-64"
>
<Mail :size="16" :stroke-width="2" aria-hidden="true" />
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/dialogs/Dialog11.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const selectedRating = ref<string>('')
>
<template v-for="number in ratings" :key="number">
<label
class="relative flex size-9 flex-1 cursor-pointer flex-col items-center justify-center gap-3 border border-input text-center text-sm outline-offset-2 transition-colors first:rounded-s-lg last:rounded-e-lg has-data-[state=checked]:z-10 has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent has-data-disabled:opacity-50 has-focus-visible:outline-2 has-focus-visible:outline-ring/70"
class="relative flex size-9 flex-1 cursor-pointer flex-col items-center justify-center gap-3 border border-input text-center text-sm outline-offset-2 transition-colors first:rounded-s-lg last:rounded-e-lg has-data-[state=checked]:z-10 has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent has-data-disabled:opacity-64 has-focus-visible:outline-2 has-focus-visible:outline-ring/70"
>
<RadioGroupItem
:id="`radio-17-r${number}`"
Expand Down
2 changes: 1 addition & 1 deletion src/components/dialogs/Dialog16.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const isPrimaryCard = ref(false)
v-mask="cardNumberMask"
/>
<div
class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50"
class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-64"
>
<CreditCard :size="16" stroke-width="2" aria-hidden="true" />
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/dialogs/Dialog17.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ const couponCode = ref('')
v-mask="cardNumberMask"
/>
<div
class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50"
class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-64"
>
<CreditCard :size="16" stroke-width="2" aria-hidden="true" />
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/dialogs/Dialog19.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ function handleAvatarChange(event: Event) {
required
/>
<div
class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50"
class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-64"
>
<Check :size="16" stroke-width="2" class="text-emerald-500" aria-hidden="true" />
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/inputs/Input09.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import Label from '@/components/ui/Label.vue'
<div class="relative">
<Input id="input-09" class="peer ps-9" placeholder="Email" type="email" />
<div
class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50"
class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-64"
>
<AtSign :size="16" :stroke-width="2" aria-hidden="true" />
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/inputs/Input10.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import Label from '@/components/ui/Label.vue'
<div class="relative">
<Input id="input-10" class="peer pe-9" placeholder="Email" type="email" />
<div
class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50"
class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-64"
>
<Mail :size="16" :stroke-width="2" aria-hidden="true" />
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/inputs/Input11.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Label from '@/components/ui/Label.vue'
<div class="relative">
<Input id="input-11" class="peer ps-16" placeholder="google.com" type="text" />
<span
class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-50"
class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-64"
>
https://
</span>
Expand Down
2 changes: 1 addition & 1 deletion src/components/inputs/Input12.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Label from '@/components/ui/Label.vue'
<div class="relative">
<Input id="input-12" class="peer pe-12" placeholder="google" type="text" />
<span
class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm text-muted-foreground peer-disabled:opacity-50"
class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm text-muted-foreground peer-disabled:opacity-64"
>
.com
</span>
Expand Down
4 changes: 2 additions & 2 deletions src/components/inputs/Input13.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ import Label from '@/components/ui/Label.vue'
<div class="relative">
<Input id="input-13" class="peer pe-12 ps-6" placeholder="0.00" type="text" />
<span
class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-50"
class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-64"
>
€
</span>
<span
class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm text-muted-foreground peer-disabled:opacity-50"
class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm text-muted-foreground peer-disabled:opacity-64"
>
EUR
</span>
Expand Down
4 changes: 2 additions & 2 deletions src/components/inputs/Input17.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import Input from '@/components/ui/Input.vue'
<div class="flex rounded-lg shadow-xs shadow-black/[.04]">
<div class="relative">
<select
class="peer inline-flex h-full appearance-none items-center rounded-s-lg border border-input bg-background pe-8 ps-3 text-sm text-muted-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
class="peer inline-flex h-full appearance-none items-center rounded-s-lg border border-input bg-background pe-8 ps-3 text-sm text-muted-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
aria-label="Protocol"
>
<option value="https://">https://</option>
Expand All @@ -21,7 +21,7 @@ import Input from '@/components/ui/Input.vue'
<option value="wss://">wss://</option>
</select>
<span
class="pointer-events-none absolute inset-y-0 end-px z-10 flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-50"
class="pointer-events-none absolute inset-y-0 end-px z-10 flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-64"
>
<ChevronDown :size="16" :stroke-width="2" aria-hidden="true" />
</span>
Expand Down
4 changes: 2 additions & 2 deletions src/components/inputs/Input18.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@ import Label from '@/components/ui/Label.vue'
/>
<div class="relative inline-flex">
<select
class="peer inline-flex h-full appearance-none items-center rounded-e-lg border border-input bg-background pe-8 ps-3 text-sm text-muted-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
class="peer inline-flex h-full appearance-none items-center rounded-e-lg border border-input bg-background pe-8 ps-3 text-sm text-muted-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
aria-label="Domain suffix"
>
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select>
<span
class="pointer-events-none absolute inset-y-0 end-px z-10 flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-50"
class="pointer-events-none absolute inset-y-0 end-px z-10 flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-64"
>
<ChevronDown :size="16" :stroke-width="2" aria-hidden="true" />
</span>
Expand Down
2 changes: 1 addition & 1 deletion src/components/inputs/Input19.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import Label from '@/components/ui/Label.vue'
<div class="relative">
<Input id="input-19" class="pe-9" placeholder="Email" type="email" />
<button
class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
aria-label="Subscribe"
>
<Send :size="16" :stroke-width="2" aria-hidden="true" />
Expand Down
2 changes: 1 addition & 1 deletion src/components/inputs/Input20.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import Label from '@/components/ui/Label.vue'
type="email"
/>
<button
class="inline-flex w-9 items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
class="inline-flex w-9 items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
aria-label="Subscribe"
>
<Download :size="16" :stroke-width="2" aria-hidden="true" />
Expand Down
2 changes: 1 addition & 1 deletion src/components/inputs/Input21.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import Label from '@/components/ui/Label.vue'
type="email"
/>
<button
class="inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm font-medium text-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
class="inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm font-medium text-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
>
Send
</button>
Expand Down
2 changes: 1 addition & 1 deletion src/components/inputs/Input22.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Label from '@/components/ui/Label.vue'
<div class="flex gap-2">
<Input id="input-22" class="flex-1" placeholder="Email" type="email" />
<button
class="inline-flex items-center rounded-lg border border-input bg-background px-3 text-sm font-medium text-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
class="inline-flex items-center rounded-lg border border-input bg-background px-3 text-sm font-medium text-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
>
Send
</button>
Expand Down
2 changes: 1 addition & 1 deletion src/components/inputs/Input23.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const toggleVisibility = () => {
:type="isVisible ? 'text' : 'password'"
/>
<button
class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
type="button"
@click="toggleVisibility"
:aria-label="isVisible ? 'Hide password' : 'Show password'"
Expand Down
2 changes: 1 addition & 1 deletion src/components/inputs/Input24.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ function handleClearInput() {
/>
<button
v-if="inputValue"
class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow animate-in fade-in zoom-in-75 hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow animate-in fade-in zoom-in-75 hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
aria-label="Clear input"
@click="handleClearInput"
>
Expand Down
4 changes: 2 additions & 2 deletions src/components/inputs/Input26.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ import Label from '@/components/ui/Label.vue'
<div class="relative">
<Input id="input-26" class="peer pe-9 ps-9" placeholder="Search..." type="search" />
<div
class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50"
class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-64"
>
<Search :size="16" :stroke-width="2" />
</div>
<button
class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
aria-label="Submit search"
type="submit"
>
Expand Down
Loading
Loading