From 0e70d9e3530a02720cf7028857431833b4c325d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 28 May 2021 14:15:42 +0200
Subject: [PATCH] MOBILE-3320 quiz: Improve drag and drop question styles

---
 .../component/addon-qtype-ddimageortext.html  |   9 +-
 .../component/ddimageortext.scss              |  55 ++--
 .../component/addon-qtype-ddmarker.html       |   8 +-
 .../qtype/ddmarker/component/ddmarker.scss    | 264 +++++++++---------
 .../ddwtos/component/addon-qtype-ddwtos.html  |   8 +-
 src/addons/qtype/ddwtos/component/ddwtos.scss | 214 +++++++-------
 src/theme/globals.variables.scss              |   2 +-
 src/theme/theme.dark.scss                     |   1 +
 src/theme/theme.light.scss                    |   2 +
 9 files changed, 289 insertions(+), 274 deletions(-)

diff --git a/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html b/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html
index a05a766cd..ff3cb646f 100644
--- a/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html
+++ b/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html
@@ -1,4 +1,4 @@
-<ion-list *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddimageortext-container">
+<div *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddimageortext-container">
     <!-- Content is outside the core-loading to let the script calculate drag items position -->
     <core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
 
@@ -15,10 +15,13 @@
                 [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
                 (afterRender)="textRendered()">
             </core-format-text>
-
+        </ion-label>
+    </ion-item>
+    <ion-item class="ion-text-wrap" [hidden]="!ddQuestion.loaded">
+        <ion-label>
             <core-format-text *ngIf="ddQuestion.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId"
                 [text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()">
             </core-format-text>
         </ion-label>
     </ion-item>
-</ion-list>
+</div>
diff --git a/src/addons/qtype/ddimageortext/component/ddimageortext.scss b/src/addons/qtype/ddimageortext/component/ddimageortext.scss
index 8487bbcdf..f39426055 100644
--- a/src/addons/qtype/ddimageortext/component/ddimageortext.scss
+++ b/src/addons/qtype/ddimageortext/component/ddimageortext.scss
@@ -2,18 +2,29 @@
 
 // Style ddimageortext content a bit. Almost all these styles are copied from Moodle.
 :host {
-    .addon-qtype-ddimageortext-container {
-        min-height: 80px; // To display the loading.
-    }
+    --ddimageortext-border-drop: var(--gray-darker);
+    --ddimageortext-draghome-background: nth($core-dd-question-colors, 2);
+}
+
+.addon-qtype-ddimageortext-container {
+    min-height: 80px; // To display the loading.
+}
+
+core-format-text ::ng-deep {
+
+    div.ddarea {
+        text-align: center;
+        position: relative;
+        margin-top: 10px;
+        user-select: none;
 
-    core-format-text ::ng-deep {
         .qtext {
             margin-bottom: 0.5em;
             display: block;
         }
 
         div.droparea img {
-            border: 1px solid var(--gray-darker);
+            border: 1px solid var(--core-dd-question-border);
             max-width: 100%;
         }
 
@@ -27,9 +38,9 @@
         }
 
         div.draghome {
-            border: 1px solid var(--gray-darker);
+            border: 1px solid var(--core-dd-question-border);
             cursor: pointer;
-            background-color: #B0C4DE;
+            background-color: var(--ddimageortext-draghome-background);
             display: inline-block;
             height: auto;
             width: auto;
@@ -39,37 +50,40 @@
         @for $i from 0 to length($core-dd-question-colors) {
             .group#{$i + 1} {
                 background: nth($core-dd-question-colors, $i + 1);
+                color: get_contrast_color(nth($core-dd-question-colors, $i + 1));
             }
         }
 
         .group2 {
-            border-radius: 10px 0 0 0;
+            border-radius: var(--core-dd-question-radius) 0 0 0;
         }
         .group3 {
-            border-radius: 0 10px 0 0;
+            border-radius: 0 var(--core-dd-question-radius) 0 0;
         }
         .group4 {
-            border-radius: 0 0 10px 0;
+            border-radius: 0 0 var(--core-dd-question-radius) 0;
         }
         .group5 {
-            border-radius: 0 0 0 10px;
+            border-radius: 0 0 0 var(--core-dd-question-radius);
         }
         .group6 {
-            border-radius: 0 10px 10px 0;
+            border-radius: 0 var(--core-dd-question-radius) var(--core-dd-question-radius) 0;
         }
         .group7 {
-            border-radius: 10px 0 0 10px;
+            border-radius: var(--core-dd-question-radius) 0 0 var(--core-dd-question-radius);
         }
         .group8 {
-            border-radius: 10px 10px 10px 10px;
+            border-radius: var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius);
         }
 
         .drag {
-            border: 1px solid var(--gray-darker);
-            color: var(--ion-text-color);
+            border: 1px solid var(--core-dd-question-border);
             cursor: pointer;
             z-index: 2;
         }
+        .drag.placed {
+            border: 1px solid var(--ddimageortext-border-drop);
+        }
         .dragitems.readonly .drag {
             cursor: auto;
         }
@@ -85,16 +99,11 @@
         .drag img {
             display: block;
         }
-
-        div.ddarea {
-            text-align : center;
-            position: relative;
-        }
         .dropbackground {
             margin:0 auto;
         }
         .dropzone {
-            border: 1px solid var(--gray-darker);
+            border: 1px solid var(--ddimageortext-border-drop);
             position: absolute;
             z-index: 1;
             cursor: pointer;
@@ -104,7 +113,7 @@
         }
 
         div.dragitems div.draghome, div.dragitems div.drag {
-            font:13px/1.231 arial,helvetica,clean,sans-serif;
+            font: 13px/1.231 arial, helvetica, clean, sans-serif;
         }
         .drag.beingdragged {
             z-index: 3;
diff --git a/src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html b/src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html
index cb66752d6..39a60a78d 100644
--- a/src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html
+++ b/src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html
@@ -1,4 +1,4 @@
-<ion-list *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddmarker-container">
+<div *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddmarker-container">
     <!-- Content is outside the core-loading to let the script calculate drag items position -->
     <core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
 
@@ -14,9 +14,13 @@
                 [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
                 (afterRender)="textRendered()">
             </core-format-text>
+        </ion-label>
+    </ion-item>
+    <ion-item class="ion-text-wrap" [hidden]="!ddQuestion.loaded">
+        <ion-label>
             <core-format-text *ngIf="ddQuestion.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId"
                 [text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()">
             </core-format-text>
         </ion-label>
     </ion-item>
-</ion-list>
+</div>
diff --git a/src/addons/qtype/ddmarker/component/ddmarker.scss b/src/addons/qtype/ddmarker/component/ddmarker.scss
index e9b68df0a..b62ffbfcd 100644
--- a/src/addons/qtype/ddmarker/component/ddmarker.scss
+++ b/src/addons/qtype/ddmarker/component/ddmarker.scss
@@ -1,150 +1,150 @@
 // Style ddmarker content a bit. Almost all these styles are copied from Moodle.
-:host {
-    .addon-qtype-ddmarker-container {
-        min-height: 80px; // To display the loading.
+.addon-qtype-ddmarker-container {
+    min-height: 80px; // To display the loading.
+}
+
+core-format-text ::ng-deep {
+    .ddarea, .ddform {
+        user-select: none;
     }
 
-    core-format-text ::ng-deep {
-        .ddarea, .ddform {
-            user-select: none;
-        }
+    .qtext {
+        margin-bottom: 0.5em;
+        display: block;
+    }
 
-        .qtext {
-            margin-bottom: 0.5em;
-            display: block;
-        }
+    .droparea {
+        display: inline-block;
+    }
 
-        .droparea {
-            display: inline-block;
-        }
+    div.droparea img {
+        border: 1px solid var(--core-dd-question-border);
+        max-width: 100%;
+    }
 
-        div.droparea img {
-            border: 1px solid var(--gray-darker);
-            max-width: 100%;
-        }
+    .dropzones svg {
+        z-index: 3;
+    }
 
-        .dropzones svg {
-            z-index: 3;
-        }
+    .dragitem.beingdragged .markertext {
+        z-index: 5;
+        box-shadow: var(--core-dd-question-selected-shadow);
+    }
 
-        .dragitem.beingdragged .markertext {
-            z-index: 5;
-            box-shadow: var(--core-dd-question-selected-shadow);
-        }
-
-        .dragitems, // Previous to 3.9.
-        .draghomes {
-            &.readonly {
-                .dragitem,
-                .marker {
-                    cursor: auto;
-                }
-            }
-
-            .dragitem, // Previous to 3.9.
-            .draghome,
-            .marker {
-                vertical-align: top;
-                cursor: pointer;
-                position: relative;
-                margin: 10px;
-                display: inline-block;
-                &.dragplaceholder {
-                    display: none;
-                    visibility: hidden;
-
-                    &.active {
-                        display: inline-block;
-                    }
-                }
-
-                &.unplaced {
-                    position: relative;
-                }
-                &.placed {
-                    position: absolute;
-                    opacity: 0.6;
-                }
-            }
-        }
-
-        .droparea {
+    .dragitems, // Previous to 3.9.
+    .draghomes {
+        &.readonly {
             .dragitem,
             .marker {
-                cursor: pointer;
-                position: absolute;
-                vertical-align: top;
-                z-index: 2;
+                cursor: auto;
             }
         }
 
-        div.ddarea {
-            text-align: center;
+        .dragitem, // Previous to 3.9.
+        .draghome,
+        .marker {
+            vertical-align: top;
+            cursor: pointer;
             position: relative;
-        }
-        div.ddarea .dropzones,
-        div.ddarea .markertexts {
-            top: 0;
-            left: 0;
-            min-height: 80px;
-            position: absolute;
-            text-align: start;
-        }
-
-        .dropbackground {
-            margin: 0 auto;
-        }
-
-        div.dragitems div.draghome,
-        div.dragitems div.dragitem,
-        div.draghome,
-        div.drag,
-        div.draghomes div.marker,
-        div.marker,
-        div.drag {
-            font: 13px/1.231 arial,helvetica,clean,sans-serif;
-        }
-        div.dragitems span.markertext,
-        div.draghomes span.markertext,
-        div.markertexts span.markertext {
-            margin: 0 5px;
-            z-index: 2;
-            background-color: var(--white);
-            border: 2px solid var(--gray-darker);
-            padding: 5px;
+            margin: 10px;
             display: inline-block;
-            zoom: 1;
-            border-radius: 10px;
-            color: var(--ion-text-color);
-        }
-        div.markertexts span.markertext {
-            z-index: 3;
-            background-color: var(--yellow-light);
-            border-style: solid;
-            border-width: 2px;
-            border-color: var(--yellow);
-            position: absolute;
-        }
-        span.wrongpart {
-            background-color: var(--yellow-light);
-            border-style: solid;
-            border-width: 2px;
-            border-color: var(--yellow);
-            padding: 5px;
-            border-radius: 10px;
-            opacity: 0.6;
-            margin: 5px;
-            display: inline-block;
-        }
-        div.dragitems img.target,
-        div.draghomes img.target {
-            position: absolute;
-            left: -7px; /* This must be half the size of the target image, minus 0.5. */
-            top: -7px; /* In other words, this works for a 15x15 cross-hair. */
-        }
-        div.dragitems div.draghome img.target,
-        div.draghomes div.marker img.target {
-            display: none;
+            &.dragplaceholder {
+                display: none;
+                visibility: hidden;
+
+                &.active {
+                    display: inline-block;
+                }
+            }
+
+            &.unplaced {
+                position: relative;
+            }
+            &.placed {
+                position: absolute;
+                opacity: 0.6;
+            }
         }
     }
+
+    .droparea {
+        .dragitem,
+        .marker {
+            cursor: pointer;
+            position: absolute;
+            vertical-align: top;
+            z-index: 2;
+        }
+    }
+
+    div.ddarea {
+        text-align: center;
+        position: relative;
+    }
+    div.ddarea .dropzones,
+    div.ddarea .markertexts {
+        top: 0;
+        left: 0;
+        min-height: 80px;
+        position: absolute;
+        text-align: start;
+    }
+
+    .dropbackground {
+        margin: 0 auto;
+    }
+
+    div.dragitems div.draghome,
+    div.dragitems div.dragitem,
+    div.draghome,
+    div.drag,
+    div.draghomes div.marker,
+    div.marker,
+    div.drag {
+        font: 13px/1.231 arial, helvetica, clean, sans-serif;
+    }
+    div.dragitems span.markertext,
+    div.draghomes span.markertext,
+    div.markertexts span.markertext {
+        margin: 0 5px;
+        z-index: 2;
+        background-color: var(--ion-item-background);
+        border: 2px solid var(--core-dd-question-border);
+        padding: 5px;
+        display: inline-block;
+        zoom: 1;
+        border-radius: 10px;
+        color: var(--ion-text-color);
+    }
+    div.markertexts span.markertext {
+        z-index: 3;
+        background-color: var(--yellow-light);
+        border-style: solid;
+        border-width: 2px;
+        border-color: var(--yellow);
+        position: absolute;
+        color: var(--black);
+    }
+    span.wrongpart {
+        background-color: var(--yellow-light);
+        border-style: solid;
+        border-width: 2px;
+        border-color: var(--yellow);
+        padding: 5px;
+        border-radius: 10px;
+        opacity: 0.6;
+        margin: 5px;
+        display: inline-block;
+        color: var(--black);
+    }
+    div.dragitems img.target,
+    div.draghomes img.target {
+        position: absolute;
+        left: -7px; /* This must be half the size of the target image, minus 0.5. */
+        top: -7px; /* In other words, this works for a 15x15 cross-hair. */
+    }
+    div.dragitems div.draghome img.target,
+    div.draghomes div.marker img.target {
+        display: none;
+    }
 }
diff --git a/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html b/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html
index 3e3feddae..86b733857 100644
--- a/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html
+++ b/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html
@@ -1,8 +1,8 @@
-<ion-list *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddwtos-container">
+<div *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddwtos-container">
     <!-- Content is outside the core-loading to let the script calculate drag items position -->
     <core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
 
-    <ion-item class="ion-text-wrap addon-qtype-ddwtos-container" [hidden]="!ddQuestion.loaded">
+    <ion-item class="ion-text-wrap" [hidden]="!ddQuestion.loaded">
         <ion-label>
             <ion-card *ngIf="!ddQuestion.readOnly" class="core-info-card">
                 <ion-item>
@@ -14,10 +14,12 @@
                 [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext
                 (afterRender)="textRendered()">
             </core-format-text>
+
             <core-format-text *ngIf="ddQuestion.answers" [component]="component" [componentId]="componentId"
                 [text]="ddQuestion.answers" [filter]="false" (afterRender)="answersRendered()">
             </core-format-text>
+
             <div class="drags"></div>
         </ion-label>
     </ion-item>
-</ion-list>
+</div>
diff --git a/src/addons/qtype/ddwtos/component/ddwtos.scss b/src/addons/qtype/ddwtos/component/ddwtos.scss
index 4173fe334..e5b4ccfb5 100644
--- a/src/addons/qtype/ddwtos/component/ddwtos.scss
+++ b/src/addons/qtype/ddwtos/component/ddwtos.scss
@@ -1,126 +1,120 @@
 @import "~core/features/question/question";
 
 // Style ddwtos content a bit. Almost all these styles are copied from Moodle.
-:host {
-    .addon-qtype-ddwtos-container {
-        min-height: 80px; // To display the loading.
+.addon-qtype-ddwtos-container {
+    min-height: 80px; // To display the loading.
+}
+
+core-format-text ::ng-deep, .drags ::ng-deep {
+    .qtext {
+        margin-bottom: 0.5em;
+        display: block;
     }
 
-    core-format-text ::ng-deep, .drags ::ng-deep {
-        .qtext {
-            margin-bottom: 0.5em;
-            display: block;
-        }
+    .draghome {
+        margin-bottom: 1em;
+        max-width: calc(100%);
+    }
 
-        .draghome {
-            margin-bottom: 1em;
-            max-width: calc(100%);
-        }
+    .answertext {
+        margin-bottom: 0.5em;
+    }
 
-        .answertext {
-            margin-bottom: 0.5em;
-        }
+    .drop {
+        display: inline-block;
+        text-align: center;
+        border: 1px solid var(--core-dd-question-border);
+        margin-bottom: 2px;
+        border-radius: 5px;
+        cursor: pointer;
+    }
+    .draghome, .drag {
+        display: inline-block;
+        text-align: center;
+        background: transparent;
+        border: 0;
+        white-space: normal;
+        overflow: visible;
+        word-wrap: break-word;
+    }
+    .draghome, .drag.unplaced{
+        border: 1px solid var(--core-dd-question-border);
+    }
+    .draghome {
+        visibility: hidden;
+    }
+    .drag {
+        z-index: 2;
+        border-radius: 5px;
+        line-height: 25px;
+        cursor: pointer;
+    }
+    .drag.selected,
+    .drop.selected {
+        z-index: 3;
+        box-shadow: var(--core-dd-question-selected-shadow);
+    }
 
-        .drop {
-            display: inline-block;
-            text-align: center;
-            border: 1px solid var(--gray-darker);
-            margin-bottom: 2px;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-        .draghome, .drag {
-            display: inline-block;
-            text-align: center;
-            background: transparent;
-            border: 0;
-            white-space: normal;
-            overflow: visible;
-            word-wrap: break-word;
-        }
-        .draghome, .drag.unplaced{
-            border: 1px solid var(--gray-darker);
-        }
-        .draghome {
-            visibility: hidden;
-        }
-        .drag {
-            z-index: 2;
-            border-radius: 5px;
-            line-height: 25px;
-            cursor: pointer;
-        }
-        .drag.selected {
-            z-index: 3;
-            box-shadow: var(--core-dd-question-selected-shadow);
-        }
+    &.notreadonly .drag,
+    &.notreadonly .draghome,
+    &.notreadonly .drop,
+    &.notreadonly .answercontainer {
+        cursor: pointer;
+        border-radius: 5px;
+    }
 
-        .drop.selected {
-            border-color: var(--yellow-light);
-            box-shadow: 0 0 5px 5px var(--yellow-light);
-        }
+    &.readonly .drag,
+    &.readonly .draghome,
+    &.readonly .drop,
+    &.readonly .answercontainer {
+        cursor: default;
+    }
 
-        &.notreadonly .drag,
-        &.notreadonly .draghome,
-        &.notreadonly .drop,
-        &.notreadonly .answercontainer {
-            cursor: pointer;
-            border-radius: 5px;
-        }
+    span.incorrect {
+        background-color: var(--core-question-incorrect-color-bg);
+    }
+    span.correct {
+        background-color: var(--core-question-correct-color-bg);
+    }
 
-        &.readonly .drag,
-        &.readonly .draghome,
-        &.readonly .drop,
-        &.readonly .answercontainer {
-            cursor: default;
+    @for $i from 0 to length($core-dd-question-colors) {
+        .group#{$i + 1} {
+            background: nth($core-dd-question-colors, $i + 1);
+            color: get_contrast_color(nth($core-dd-question-colors, $i + 1));
         }
+    }
 
-        span.incorrect {
-            background-color: var(--core-question-incorrect-color-bg);
-        }
-        span.correct {
-            background-color: var(--core-question-correct-color-bg);
-        }
+    .group2 {
+        border-radius: var(--core-dd-question-radius) 0 0 0;
+    }
+    .group3 {
+        border-radius: 0 var(--core-dd-question-radius) 0 0;
+    }
+    .group4 {
+        border-radius: 0 0 var(--core-dd-question-radius) 0;
+    }
+    .group5 {
+        border-radius: 0 0 0 var(--core-dd-question-radius);
+    }
+    .group6 {
+        border-radius: 0 var(--core-dd-question-radius) var(--core-dd-question-radius) 0;
+    }
+    .group7 {
+        border-radius: var(--core-dd-question-radius) 0 0 var(--core-dd-question-radius);
+    }
+    .group8 {
+        border-radius: var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius);
+    }
 
-        @for $i from 0 to length($core-dd-question-colors) {
-            .group#{$i + 1} {
-                background: nth($core-dd-question-colors, $i + 1);
-                color: var(--ion-text-color);
-            }
-        }
-
-        .group2 {
-            border-radius: 10px 0 0 0;
-        }
-        .group3 {
-            border-radius: 0 10px 0 0;
-        }
-        .group4 {
-            border-radius: 0 0 10px 0;
-        }
-        .group5 {
-            border-radius: 0 0 0 10px;
-        }
-        .group6 {
-            border-radius: 0 10px 10px 0;
-        }
-        .group7 {
-            border-radius: 10px 0 0 10px;
-        }
-        .group8 {
-            border-radius: 10px 10px 10px 10px;
-        }
-
-        sub, sup {
-            font-size: 80%;
-            position: relative;
-            vertical-align: baseline;
-        }
-        sup {
-            top: -0.4em;
-        }
-        sub {
-            bottom: -0.2em;
-        }
+    sub, sup {
+        font-size: 80%;
+        position: relative;
+        vertical-align: baseline;
+    }
+    sup {
+        top: -0.4em;
+    }
+    sub {
+        bottom: -0.2em;
     }
 }
diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss
index 9b3816e6d..18da1f961 100644
--- a/src/theme/globals.variables.scss
+++ b/src/theme/globals.variables.scss
@@ -237,7 +237,7 @@ $colors-dark:  (
 
 $core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;
 
-$core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;
+$core-dd-question-colors: #FFFFFF, #B0C4DE, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;
 
 /*
  * Layout Breakpoints
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index 9b88dac3c..8bc2df0ef 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -117,6 +117,7 @@
     --core-question-feedback-background-color: var(--yellow-dark);
 
     --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-light);
+    --core-dd-question-border: var(--gray-light);
 
     --addon-messages-message-bg: #{$addon-messages-message-bg-dark};
     --addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg-dark};
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 9f992fe7b..85c1d11dc 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -275,6 +275,8 @@
     --core-question-feedback-background-color: var(--yellow-light);
 
     --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-dark);
+    --core-dd-question-radius: 10px;
+    --core-dd-question-border: var(--gray-darker);
 
     @if ($core-more-icon) {
         --core-more-icon: #{$core-more-icon};