diff --git a/src/assets/oruga-tailwindcss.css b/src/assets/oruga-tailwindcss.css index 8aa088cb8..6642f6b44 100644 --- a/src/assets/oruga-tailwindcss.css +++ b/src/assets/oruga-tailwindcss.css @@ -246,18 +246,17 @@ body { } /* Radio */ -.radio { - @apply mr-2; +.o-radio__input:checked { + /* override a CSS prop (background-image url on `[type="radio"]:checked`) set by default by tailwind + that alter the oruga o-radio design */ + background-image:none; } -.form-radio { - @apply bg-none text-primary border-primary accent-primary; -} -.radio-label { - @apply pl-2; -} - -.o-field--addons .o-radio:not(:only-child) input { - @apply rounded-full; +/* Checkbox */ +.o-checkbox__input:checked { + /* We want the current color for the checked mark + instead of oruga default white */ + border-color: transparent; + background-color: currentColor; } /* Editor */ diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css index 9d1ebab06..c3fe69dc3 100644 --- a/src/assets/tailwind.css +++ b/src/assets/tailwind.css @@ -28,6 +28,23 @@ } } +:root { + + /* TODO Try to change the primary color but without success */ + --oruga-primary: #1e7d97; + --oruga-variant-primary: #1e7d97; + + /* So force change the primary color for each component */ + --oruga-radio-active-background-color: #1e7d97; + --oruga-switch-checked-background: #1e7d97; + + /* We want transparent background for buttons + instead of oruga default primay color */ + --oruga-checkbox-background-color: white; + --oruga-checkbox-active-background-color: white; + +} + @media (prefers-color-scheme: dark) { :root { --oruga-variant-primary: #1e7d97; diff --git a/src/oruga-config.ts b/src/oruga-config.ts index 2131f1e39..8450a1248 100644 --- a/src/oruga-config.ts +++ b/src/oruga-config.ts @@ -95,12 +95,6 @@ export const orugaConfig = { select: { selectClass: "select", }, - radio: { - rootClass: "radio", - inputCheckedClass: "radio-checked", - inputClass: "form-radio", - labelClass: "radio-label", - }, notification: { rootClass: "notification", variantClass: (variant: string) => {