Remplacer les variables border-radius par le thème

Bonjour,

J’ai essayé de remplacer les nouvelles variables border-radius avec un thème distant, mais il semble que les variables :root de base soient toujours prioritaires. Je peux les remplacer si je crée un composant de thème dans l’administration. Y a-t-il un moyen de les remplacer avec un thème ? Qu’est-ce qui me manque ? :slightly_smiling_face:

Ce petit changement est tellement utile, merci beaucoup ! :heart:


Ok, cela fonctionne comme prévu, c’est juste mon site de test qui me faisait des blagues. :slightly_smiling_face:

3 « J'aime »

Ah, il semble que ce n’était pas une blague :grinning_face_with_smiling_eyes: Avec un thème distant, je ne peux le remplacer que si j’utilise !important.

Si je l’utilise comme ceci :arrow_down_small:

$border-radius: 2em !important;

:root {
   --d-button-border-radius: #{$border-radius};
   --d-input-border-radius: #{$border-radius};
 }

Sinon, si j’essaie comme ceci :arrow_down_small:

:root {
   --d-button-border-radius: 2em;
   --d-input-border-radius: 2em;
 }

Alors les variables :root de base sont prioritaires.

Qu’est-ce qui me manque ? :thinking: Merci ! :slightly_smiling_face:

2 « J'aime »

Ça fonctionne quand je le teste dans un thème… la racine principale est remplacée par la racine du thème, comme prévu.

Pouvez-vous montrer plus d’informations ? Où définissez-vous votre racine ? À quoi ressemble votre inspecteur ?

3 « J'aime »

Bonjour Charlie,

Merci de vérifier cela :slightly_smiling_face:

J’ai essayé d’ajouter dans scss/custom-variables.scss et de l’importer dans common.scss. J’ai aussi essayé d’ajouter directement dans common.scss.

Je viens de remarquer que cela fonctionne s’il n’y a pas d’autre composant (créé dans l’admin) assigné au thème. Si je crée un composant dans l’admin avec du CSS dans la section commune. Alors cela ne remplacera pas les variables racine principales pour moi.

Cela fonctionne si le thème n’a pas de composant ou si le composant Commun / CSS est vide.

Screenshot 2022-11-24 at 18.22.24


Si je crée un composant avec du Commun / CSS et que je l’active sur le thème.

Alors cela ne fonctionne pas pour moi.

Le d-default-border-radius et d-select-body-border-radius sont personnalisés.

Merci pour votre aide ! :slightly_smiling_face:

3 « J'aime »

Je vois. Très intéressant. Merci pour les étapes claires.

Je verrai ce que je trouve. Pour le moment, je suis sceptique quant à l’existence d’une solution différente de celle de !important que vous utilisez déjà, mais ce sera bien de savoir comment/pourquoi cela fonctionne ainsi.

2 « J'aime »

hmm ouais je peux reproduire ça… c’est un peu étrange.

J’ai un thème distant et tout ce que common.scss contient est :

:root {
  --d-border-radius: 100px;
}

cela fonctionne et j’obtiens des boutons arrondis et d’autres éléments :

Une fois que j’ajoute un composant de thème local qui contient du CSS, cela casse. J’ai créé un composant de thème local qui ne contient que ceci dans common.scss :

body {
  background: red;
}

J’obtiens l’arrière-plan rouge, mais le border-radius a disparu :

Le même composant fonctionne bien à distance. J’obtiens à la fois l’arrière-plan rouge et les bordures arrondies.

@david/@pmusaraj est-ce que cela a quelque chose à voir avec l’ordre de compilation des thèmes distants et locaux ?

5 « J'aime »

Je pense que cela est dû à notre injection magique de variables.scss dans chaque fichier CSS de thème. Maintenant, nous avons ceci dans variables.scss :


:root {
  --topic-body-width: #{$topic-body-width};
  --topic-body-width-padding: #{$topic-body-width-padding};
  --topic-avatar-width: #{$topic-avatar-width};
  --d-border-radius: initial;
  --d-nav-pill-border-radius: var(--d-border-radius);
  --d-button-border-radius: var(--d-border-radius);
  --d-input-border-radius: var(--d-border-radius);
}

Et parce que nous injectons ce fichier SCSS dans chaque fichier SCSS de thème et de plugin, il est répété encore et encore :

La seule façon de le remplacer actuellement est d’ajouter le remplacement à la dernière feuille de style du thème, ce n’est qu’alors qu’il est généré en dernier.

Je pense que nous devons déplacer cette déclaration :root quelque part globalement en dehors de variables.scss dans le cœur.

6 « J'aime »

Aha ! Merci beaucoup, je n’avais jamais vraiment compris pourquoi ils étaient répétés et je l’avais complètement négligé.

J’ai déplacé ceux-ci dans un autre fichier pour qu’ils ne soient pas répétés, et j’ai confirmé que cela résout le problème.

6 « J'aime »