Skip to content

Purple dark mode button #637

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
emilmilanov merged 3 commits into from
Dec 15, 2025
Merged

Purple dark mode button #637

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7401bd6
Purple dark mode button
emilmilanov Dec 12, 2025
b670b90
Update focus-visible state
emilmilanov Dec 15, 2025
63fee41
Simplifying code
emilmilanov Dec 15, 2025
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
7 changes: 7 additions & 0 deletions .changeset/short-rivers-hammer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@cypress-design/constants-button': minor
'@cypress-design/react-button': minor
'@cypress-design/vue-button': minor
---

Adding purple-dark-mode button
6 changes: 4 additions & 2 deletions components/Button/constants/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,11 @@ export const CssVariantClassesTable = {
'outline-dark':
'text-white border-white/20 hocus:border-white/60 disabled:hocus:shadow-none hocus:shadow-white/20 disabled:text-gray-700 disabled:hocus:border-white/20 disabled:border-white/20 focus:ring-gray-200',
'indigo-dark-mode':
'text-white bg-indigo-500 border-indigo-500 disabled:hocus:shadow-none disabled:bg-gray-1000 disabled:text-gray-800 disabled:border-none disabled:mix-blend-screen hocus:shadow-indigo-400/40 focus:bg-indigo-600 focus:border-indigo-600 focus:ring-transparent',
'text-white bg-indigo-500 border-indigo-500 hocus:shadow-indigo-400/40 focus:border-indigo-400 focus-visible:border-indigo-300 focus:ring-indigo-300 disabled:hocus:shadow-none disabled:bg-gray-1000 disabled:text-gray-800 disabled:mix-blend-screen disabled:border-none',
'red-dark-mode':
'text-white bg-red-500 border-red-500 disabled:hocus:shadow-none disabled:bg-gray-1000 disabled:text-gray-800 disabled:border-none hocus:shadow-red-400/40 disabled:mix-blend-screen focus:bg-red-600 focus:border-red-600 focus:ring-transparent',
'text-white bg-red-500 border-red-500 hocus:shadow-red-400/40 focus:border-red-400 focus-visible:border-red-300 focus:ring-red-300 disabled:hocus:shadow-none disabled:bg-gray-1000 disabled:text-gray-800 disabled:mix-blend-screen disabled:border-none',
'purple-dark-mode':
'text-white bg-purple-500 border-purple-500 hocus:shadow-purple-400/40 focus:border-purple-400 focus-visible:border-purple-300 focus:ring-purple-300 disabled:hocus:shadow-none disabled:bg-gray-1000 disabled:text-gray-800 disabled:mix-blend-screen disabled:border-none',
} as const

export const DefaultVariant: keyof typeof CssVariantClassesTable = 'indigo-dark'
Expand Down
31 changes: 14 additions & 17 deletions components/Button/react/Button.rootstory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,18 @@ import Button from './Button'
import { CssSizeClassesTable, CssVariantClassesTable } from '../constants'
import type { ButtonSizes, ButtonVariants } from '../constants'

const darkModeVariants: ButtonVariants[] = [
'outline-dark',
'outline-red-dark-mode',
'outline-jade-dark-mode',
'outline-indigo-dark-mode',
'outline-purple-dark-mode',
'red-dark-mode',
'purple-dark-mode',
'indigo-dark-mode',
'disabled-dark-mode',
]

export default ({
disabled = false,
href,
Expand All @@ -18,15 +30,7 @@ export default ({
className={clsx(
'flex flex-col items-center gap-3 justify-center mt-4 p-2',
{
'bg-gray-1000 text-white':
variant === 'outline-dark' ||
variant === 'outline-red-dark-mode' ||
variant === 'outline-jade-dark-mode' ||
variant === 'outline-indigo-dark-mode' ||
variant === 'outline-purple-dark-mode' ||
variant === 'red-dark-mode' ||
variant === 'indigo-dark-mode' ||
variant === 'disabled-dark-mode',
'bg-gray-1000 text-white': darkModeVariants.includes(variant),
},
)}
>
Expand All @@ -39,14 +43,7 @@ export default ({
<span
className={clsx(
'text-sm mr-4',
variant === 'outline-dark' ||
variant === 'outline-red-dark-mode' ||
variant === 'outline-jade-dark-mode' ||
variant === 'outline-indigo-dark-mode' ||
variant === 'outline-purple-dark-mode' ||
variant === 'red-dark-mode' ||
variant === 'indigo-dark-mode' ||
variant === 'disabled-dark-mode'
darkModeVariants.includes(variant)
? 'text-gray-300'
: 'text-gray-900',
)}
Expand Down
38 changes: 16 additions & 22 deletions components/Button/react/ReadMe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,35 +61,29 @@ import {
} from '@cypress-design/react-button'

export default () => {
const darkModeVariants = [
'outline-dark',
'outline-red-dark-mode',
'outline-jade-dark-mode',
'outline-indigo-dark-mode',
'outline-purple-dark-mode',
'red-dark-mode',
'purple-dark-mode',
'indigo-dark-mode',
'disabled-dark-mode',
]

return (
<div className="flex flex-wrap justify-stretch gap-[8px]">
{Object.keys(VariantClassesTable).map((variant) => (
<div
key={variant}
className="px-[8px] py-[12px] flex flex-col items-center gap-[16px] rounded min-w-[180px]"
style={{
backgroundColor:
variant === 'outline-dark' ||
variant === 'outline-red-dark-mode' ||
variant === 'outline-jade-dark-mode' ||
variant === 'outline-indigo-dark-mode' ||
variant === 'outline-purple-dark-mode' ||
variant === 'red-dark-mode' ||
variant === 'indigo-dark-mode' ||
variant === 'disabled-dark-mode'
? '#1a202c'
: 'white',
color:
variant === 'outline-dark' ||
variant === 'outline-red-dark-mode' ||
variant === 'outline-jade-dark-mode' ||
variant === 'outline-indigo-dark-mode' ||
variant === 'outline-purple-dark-mode' ||
variant === 'red-dark-mode' ||
variant === 'indigo-dark-mode' ||
variant === 'disabled-dark-mode'
? 'white'
: 'black',
backgroundColor: darkModeVariants.includes(variant)
? '#1a202c'
: 'white',
color: darkModeVariants.includes(variant) ? 'white' : 'black',
}}
>
{variant}
Expand Down
43 changes: 15 additions & 28 deletions components/Button/vue/Button.rootstory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,18 @@ import Button from './Button.vue'
import type { ButtonSizes, ButtonVariants } from '../constants'
import { CssSizeClassesTable, CssVariantClassesTable } from '../constants'

const darkModeVariants: ButtonVariants[] = [
'outline-dark',
'outline-red-dark-mode',
'outline-jade-dark-mode',
'outline-indigo-dark-mode',
'outline-purple-dark-mode',
'red-dark-mode',
'purple-dark-mode',
'indigo-dark-mode',
'disabled-dark-mode',
]

export default ({
disabled = false,
href,
Expand All @@ -15,15 +27,7 @@ export default ({
class={clsx(
'flex flex-col items-center gap-3 justify-center mt-4 p-2',
{
'bg-gray-1000 text-white':
variant === 'outline-dark' ||
variant === 'outline-red-dark-mode' ||
variant === 'outline-jade-dark-mode' ||
variant === 'outline-indigo-dark-mode' ||
variant === 'outline-purple-dark-mode' ||
variant === 'red-dark-mode' ||
variant === 'indigo-dark-mode' ||
variant === 'disabled-dark-mode',
'bg-gray-1000 text-white': darkModeVariants.includes(variant),
},
)}
>
Expand All @@ -35,25 +39,8 @@ export default ({
<div class="flex items-center justify-center">
<span
class={clsx('text-sm mr-4', {
'text-gray-300':
variant === 'outline-dark' ||
variant === 'outline-red-dark-mode' ||
variant === 'outline-jade-dark-mode' ||
variant === 'outline-indigo-dark-mode' ||
variant === 'outline-purple-dark-mode' ||
variant === 'red-dark-mode' ||
variant === 'indigo-dark-mode' ||
variant === 'disabled-dark-mode',
'text-gray-700': ![
'outline-dark',
'outline-red-dark-mode',
'outline-jade-dark-mode',
'outline-indigo-dark-mode',
'outline-purple-dark-mode',
'red-dark-mode',
'indigo-dark-mode',
'disabled-dark-mode',
].includes(variant),
'text-gray-300': darkModeVariants.includes(variant),
'text-gray-700': !darkModeVariants.includes(variant),
})}
>
{size}
Expand Down
33 changes: 14 additions & 19 deletions components/Button/vue/ReadMe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,18 @@ import {
VariantClassesTable,
SizeClassesTable,
} from '@cypress-design/vue-button'

const darkVariants = [
'outline-dark',
'outline-red-dark-mode',
'outline-jade-dark-mode',
'outline-indigo-dark-mode',
'outline-purple-dark-mode',
'red-dark-mode',
'purple-dark-mode',
'indigo-dark-mode',
'disabled-dark-mode',
]
</script>

<template>
Expand All @@ -71,25 +83,8 @@ import {
v-for="(_, variant) in VariantClassesTable"
class="p-[8px] py-[12px] flex flex-col items-center gap-[16px] rounded min-w-[180px]"
:class="{
'bg-gray-1000 text-white':
variant === 'outline-dark' ||
variant === 'outline-red-dark-mode' ||
variant === 'outline-jade-dark-mode' ||
variant === 'outline-indigo-dark-mode' ||
variant === 'outline-purple-dark-mode' ||
variant === 'red-dark-mode' ||
variant === 'indigo-dark-mode' ||
variant === 'disabled-dark-mode',
'bg-white text-gray-900': ![
'outline-dark',
'outline-red-dark-mode',
'outline-jade-dark-mode',
'outline-indigo-dark-mode',
'outline-purple-dark-mode',
'red-dark-mode',
'indigo-dark-mode',
'disabled-dark-mode',
].includes(variant),
'bg-gray-1000 text-white': darkVariants.includes(variant),
'bg-white text-gray-900': !darkVariants.includes(variant),
}"
>
{{ variant }}
Expand Down