saulteafarmer/castopod
1
0
Fork 0
mirror of https://code.castopod.org/adaures/castopod synced 2025-04-19 13:01:19 +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 9da1d0a1b6
commit da4c1e2cfd
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 {
@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? */
--tw-ring-opacity: 1;

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

@ -34,17 +34,16 @@ class Button extends Component
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) {
'primary' => 'shadow-sm 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',
'success' => 'shadow-sm ring-2 ring-pine-700 ring-inset text-pine-700 hover:ring-pine-800 hover:text-pine-800',
'danger' => 'shadow-sm ring-2 ring-red-700 ring-inset text-red-700 hover:ring-red-800 hover:text-red-800',
'warning' => 'shadow-sm ring-2 ring-yellow-700 ring-inset text-yellow-700 hover:ring-yellow-800 hover:text-yellow-800',
'info' => 'shadow-sm ring-2 ring-blue-700 ring-inset text-blue-700 hover:ring-blue-800 hover:text-blue-800',
'disabled' => 'shadow-sm text-black bg-gray-300 cursor-not-allowed',
default => 'shadow-sm text-black bg-gray-100 hover:bg-gray-300',
'primary' => 'text-accent-contrast bg-accent-base hover:bg-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',
'danger' => 'bg-red-50 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',
'info' => 'bg-blue-50 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',
default => 'text-black bg-gray-50 hover:bg-gray-200',
};
$sizeClass = match ($this->size) {

5
tailwind.config.cjs
View File

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

2
themes/cp_auth/login.php
View File

@ -32,7 +32,7 @@
<!-- Remember me -->
<?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; ?>
<x-Button variant="primary" type="submit" class="self-end"><?= lang('Auth.login') ?></x-Button>