Commit 5c529a83 authored by Yassine Doghri's avatar Yassine Doghri
Browse files

feat(settings): add theme settings to set an accent color for all public pages 

set 6 base accent colors: pine, lake, jacaranda, crimson, amber and onyx
parent a746a781

app/Config/App.php

+2 −0
Original line number Diff line number Diff line
@@ -447,4 +447,6 @@ class App extends BaseConfig 
        '192' => '/icon-192.png',

        '512' => '/icon-512.png',

    ];



    public string $theme = 'crimson';

}

app/Resources/styles/colorRadioBtn.css

0 → 100644
+26 −0
Original line number Diff line number Diff line 
@layer components {

  .color-radio-btn {

    @apply absolute opacity-0;



    &:focus + label {

      @apply ring-accent;

    }



    &:checked {

      @apply ring-2 ring-contrast;



      & + label {

        @apply flex items-center justify-center text-2xl text-accent-contrast bg-accent-base;



        &::before {

          content: "✓";

        }

      }

    }



    & + label {

      @apply inline-block w-16 h-16 text-sm font-semibold rounded-full cursor-pointer border-contrast bg-accent-base text-accent-contrast border-3;

      color: hsl(var(--color-text-muted));

    }

  }

}

app/Resources/styles/colors.css

+0 −51
Original line number Diff line number Diff line 
/*

--color-brand-lighter: hsl(173 44% 96%);

--color-brand-light: hsl(111 64% 94%);

--color-brand-base: hsl(174 100% 29%);

--color-brand-dark: hsl(172 100% 17%);

--color-brand-darker: hsl(131 100% 12%);



--color-background-elevated: hsl(0 0% 100%);

--color-background-base: hsl(173 44% 96%);



--color-text-base: hsl(240 17% 2%);

--color-text-muted: hsl(240 8% 63%);

--color-text-inverted: hsl(0 0% 100%);



--color-brand-lighter: 173 44% 96%;

--color-brand-light: 111 64% 94%;

--color-brand-base: 174 100% 29%;

--color-brand-dark: 172 100% 17%;

--color-brand-darker: 131 100% 12%;



--color-background-elevated: 0 0% 100%;

--color-background-base: 173 44% 96%;



--color-text-base: 240 17% 2%;

--color-text-muted: 240 8% 63%;

--color-text-inverted: 0 0% 100%;

*/



/* 

    --color-accent-base: 0 100% 38%;

    --color-accent-hover: 0 100% 48%;

    --color-accent-muted: 0 8% 63%;



    --color-heading-foreground: 0 64% 94%;

    --color-heading-background: 0 100% 17%;



    --color-background-elevated: 209 35% 15%;

    --color-background-base: 210 34% 13%;

    --color-background-navigation: 210 34% 11%;

    --color-background-header: 200 38% 15%;

    --color-background-highlight: 200 38% 25%;

    --color-background-backdrop: 0 0% 50%;



    --color-border-subtle: 240 8% 27%;

    --color-border-contrast: 240 8% 78%;

    --color-border-navigation: 210 34% 4%;



    --color-text-base: 240 17% 100%;

    --color-text-muted: 240 8% 63%;

*/



@layer base {

  :root {

    --color-accent-base: 174 100% 29%;

app/Resources/styles/index.css

+2 −0
Original line number Diff line number Diff line
@@ -2,10 +2,12 @@ 
@import "./custom.css";

@import "./fonts.css";

@import "./colors.css";

@import "./themes.css";

@import "./breadcrumb.css";

@import "./dropdown.css";

@import "./choices.css";

@import "./radioBtn.css";

@import "./colorRadioBtn.css";

@import "./switch.css";

@import "./radioToggler.css";

@import "./formInputTabs.css";

app/Resources/styles/radioBtn.css

+13 −13
Original line number Diff line number Diff line 
@layer components {

  .form-radio-btn {

    @apply absolute mt-3 ml-3 border-contrast border-3 text-accent-base;

  }



  .form-radio-btn:focus + label {

    &:focus {

      @apply ring-accent;

    }



  .form-radio-btn + label {

    @apply inline-block py-2 pl-8 pr-2 text-sm font-semibold rounded-lg cursor-pointer border-contrast bg-elevated border-3;

    color: hsl(var(--color-text-muted));

  }

    &:checked {

      @apply ring-2 ring-contrast;



  .form-radio-btn:checked + label {

      & + label {

        @apply text-accent-contrast bg-accent-base;

      }

    }



  .form-radio-btn:checked {

    @apply ring-2 ring-contrast;

    & + label {

      @apply inline-block py-2 pl-8 pr-2 text-sm font-semibold rounded-lg cursor-pointer border-contrast bg-elevated border-3;

      color: hsl(var(--color-text-muted));

    }

  }

}