chore: add new token for Modal component

openedx · Nov 28, 2022 · 58b1cef · 58b1cef
1 parent 6c5444c
commit 58b1cef
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 4 deletions.
diff --git a/scss/core/tokens.css b/scss/core/tokens.css
@@ -195,6 +195,7 @@
   --pgn-nav-link-font-weight: 500;
   --pgn-nav-link-padding-x: 1rem;
   --pgn-nav-link-padding-y: .5rem;
+  --pgn-modal-close-container-top: .625rem;
   --pgn-modal-zindex: 1050;
   --pgn-modal-transform-scale: scale(1.02);
   --pgn-modal-transform-show: none;

diff --git a/src/Modal/_variables.scss b/src/Modal/_variables.scss
@@ -30,7 +30,7 @@ $modal-header-border-width: var(--pgn-modal-header-border-width) !default;
 $modal-footer-border-width: var(--pgn-modal-footer-border-width) !default;
 $modal-header-padding-y: var(--pgn-modal-header-padding-y) !default;
 $modal-header-padding-x: var(--pgn-modal-header-padding-x) !default;
-$modal-close-container-top:         .625rem !default;
+$modal-close-container-top: var(--pgn-modal-close-container-top) !default;
 
 
 // Keep this for backwards compatibility

diff --git a/src/Tooltip/Tooltip.scss b/src/Tooltip/Tooltip.scss
@@ -94,15 +94,22 @@
 
 .bs-tooltip-auto {
   &[x-placement^="top"] {
+    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
     @extend .bs-tooltip-top;
   }
+
   &[x-placement^="right"] {
+    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
     @extend .bs-tooltip-right;
   }
+
   &[x-placement^="bottom"] {
+    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
     @extend .bs-tooltip-bottom;
   }
+
   &[x-placement^="left"] {
+    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
     @extend .bs-tooltip-left;
   }
 }

diff --git a/tokens/build/_variables.scss b/tokens/build/_variables.scss
@@ -194,6 +194,7 @@ $pgn-nav-tabs-border-width: 2px !default;
 $pgn-nav-link-font-weight: 500 !default;
 $pgn-nav-link-padding-x: 1rem !default;
 $pgn-nav-link-padding-y: .5rem !default;
+$pgn-modal-close-container-top: .625rem !default;
 $pgn-modal-zindex: 1050 !default;
 $pgn-modal-transform-scale: scale(1.02) !default;
 $pgn-modal-transform-show: none !default;

diff --git a/tokens/build/css-to-scss.json b/tokens/build/css-to-scss.json
diff --git a/tokens/build/scss-to-css.json b/tokens/build/scss-to-css.json
diff --git a/tokens/build/variables.css b/tokens/build/variables.css
@@ -195,6 +195,7 @@
   --pgn-nav-link-font-weight: 500;
   --pgn-nav-link-padding-x: 1rem;
   --pgn-nav-link-padding-y: .5rem;
+  --pgn-modal-close-container-top: .625rem;
   --pgn-modal-zindex: 1050;
   --pgn-modal-transform-scale: scale(1.02);
   --pgn-modal-transform-show: none;

diff --git a/tokens/source/components/Modal.json b/tokens/source/components/Modal.json
@@ -81,6 +81,9 @@
       "show": { "value": "none", "source": "$modal-show-transform" },
       "scale": { "value": "scale(1.02)", "source": "$modal-scale-transform" }
     },
-    "zindex": { "value": "1050", "source": "$zindex-modal" }
+    "zindex": { "value": "1050", "source": "$zindex-modal" },
+    "close-container": {
+      "top": { "value": ".625rem", "source": "$modal-close-container-top" }
+    }
   }
 }