saulteafarmer/castopod
1
0
Fork 0
mirror of https://code.castopod.org/adaures/castopod synced 2025-06-06 18:31:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(buttons): add tint to variants

Browse Source
This commit is contained in:
Yassine Doghri 2024-05-10 09:06:10 +00:00
parent dfb7888aeb
commit 82714e7155
4 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Resources/styles/custom.css
View File

@ -6,7 +6,7 @@
} }
.ring-accent { .ring-accent {
@apply outline-none ring-2 ring-offset-2; @apply outline-none ring-2 ring-offset-2 ring-accent-base;
/* FIXME: why doesn't ring-accent-base work? */ /* FIXME: why doesn't ring-accent-base work? */
--tw-ring-opacity: 1; --tw-ring-opacity: 1;

17
app/Views/Components/Button.php
View File

@ -34,17 +34,16 @@ class Button extends Component
public function render(): string public function render(): string
{ {
$this->mergeClass('gap-x-2 flex-shrink-0 inline-flex items-center justify-center font-semibold rounded-full'); $this->mergeClass('shadow gap-x-2 flex-shrink-0 inline-flex items-center justify-center font-semibold rounded-full');
$variantClass = match ($this->variant) { $variantClass = match ($this->variant) {
'primary' => 'shadow-sm text-accent-contrast bg-accent-base hover:bg-accent-hover', 'primary' => 'text-accent-contrast bg-accent-base hover:bg-accent-hover',
'secondary' => 'shadow-sm ring-2 ring-accent ring-inset text-accent-base bg-white hover:border-accent-hover hover:text-accent-hover', 'secondary' => 'ring-2 ring-accent-base ring-inset text-accent-base bg-white hover:border-accent-hover hover:text-accent-hover hover:ring-accent-hover',
'success' => 'shadow-sm ring-2 ring-pine-700 ring-inset text-pine-700 hover:ring-pine-800 hover:text-pine-800', 'danger' => 'bg-red-50 ring-2 ring-red-700 ring-inset text-red-700 hover:ring-red-800 hover:text-red-800',
'danger' => 'shadow-sm ring-2 ring-red-700 ring-inset text-red-700 hover:ring-red-800 hover:text-red-800', 'warning' => 'bg-yellow-50 ring-2 ring-yellow-700 ring-inset text-yellow-700 hover:ring-yellow-800 hover:text-yellow-800',
'warning' => 'shadow-sm ring-2 ring-yellow-700 ring-inset text-yellow-700 hover:ring-yellow-800 hover:text-yellow-800', 'info' => 'bg-blue-50 ring-2 ring-blue-700 ring-inset text-blue-700 hover:ring-blue-800 hover:text-blue-800',
'info' => 'shadow-sm ring-2 ring-blue-700 ring-inset text-blue-700 hover:ring-blue-800 hover:text-blue-800', 'disabled' => 'text-black bg-gray-300 cursor-not-allowed',
'disabled' => 'shadow-sm text-black bg-gray-300 cursor-not-allowed', default => 'text-black bg-gray-50 hover:bg-gray-200',
default => 'shadow-sm text-black bg-gray-100 hover:bg-gray-300',
}; };
$sizeClass = match ($this->size) { $sizeClass = match ($this->size) {

5
tailwind.config.cjs
View File

@ -76,7 +76,10 @@ module.exports = {
}, },
}, },
colors: { colors: {
accent: "hsl(var(--color-accent-base) / <alpha-value>)", accent: {
base: "hsl(var(--color-accent-base) / <alpha-value>)",
hover: "hsl(var(--color-accent-hover) / <alpha-value>)",
},
background: { background: {
header: "hsl(var(--color-background-header) / <alpha-value>)", header: "hsl(var(--color-background-header) / <alpha-value>)",
base: "hsl(var(--color-background-base) / <alpha-value>)", base: "hsl(var(--color-background-base) / <alpha-value>)",

2
themes/cp_auth/login.php
View File

@ -32,7 +32,7 @@
<!-- Remember me --> <!-- Remember me -->
<?php if (setting('Auth.sessionConfig')['allowRemembering']): ?> <?php if (setting('Auth.sessionConfig')['allowRemembering']): ?>
<x-Forms.Toggler name="remember" isChecked="<?= old('remember') ?>" size="small"><?= lang('Auth.rememberMe') ?></x-Forms.Toggler> <x-Forms.Checkbox name="remember" isChecked="<?= old('remember') ?>" size="small"><?= lang('Auth.rememberMe') ?></x-Forms.Checkbox>
<?php endif; ?> <?php endif; ?>
<x-Button variant="primary" type="submit" class="self-end"><?= lang('Auth.login') ?></x-Button> <x-Button variant="primary" type="submit" class="self-end"><?= lang('Auth.login') ?></x-Button>