refactor: added new tokens

openedx · Aug 28, 2023 · 5e8afdc · 5e8afdc
1 parent 3288ab4
commit 5e8afdc
Show file tree

Hide file tree

Showing 35 changed files with 323 additions and 245 deletions.
diff --git a/src/Card/_variables.scss b/src/Card/_variables.scss
@@ -1,56 +1,56 @@
 // Card
 
-$card-spacer-y:                      .75rem !default;
-$card-spacer-x:                      1.25rem !default;
-$card-border-width:                  $border-width !default;
-$card-border-radius:                 $border-radius !default;
-$card-border-color:                  rgba($black, .125) !default;
-$card-border-focus-color:            rgba($black, .5) !default;
-$card-border-focus-color-dark:       theme-color("primary", "focus") !default;
-$card-inner-border-radius:           subtract($card-border-radius, $card-border-width) !default;
-$card-cap-bg:                        rgba($black, .03) !default;
-$card-cap-color:                     null !default;
-$card-height:                        null !default;
-$card-color:                         null !default;
-$card-bg:                            $white !default;
-$card-bg-dark:                       $primary-500 !default;
-$card-bg-muted:                      $light-200 !default;
-
-$card-img-overlay-padding:           1.25rem !default;
-
-$card-group-margin:                  calc($grid-gutter-width / 2) !default;
-$card-deck-margin:                   $card-group-margin !default;
-$card-grid-margin:                   $card-group-margin !default;
-$card-deck-margin-bottom:            map_get($spacers, 3) !default;
-$card-grid-margin-bottom:            map_get($spacers, 3) !default;
-
-$card-columns-count:                 3 !default;
-$card-columns-gap:                   1.25rem !default;
-$card-columns-margin:                $card-spacer-y !default;
-
-$card-divider-bg:                    $light-400 !default;
-$card-divider-margin-y:              $card-spacer-y !default;
-
-$card-footer-actions-gap:            .5rem !default;
-
-$card-logo-left-offset:              1.5rem !default;
-$card-logo-bottom-offset:            1rem !default;
-$card-logo-left-offset-horizontal:   .4375rem !default;
-$card-logo-bottom-offset-horizontal: .4375rem !default;
-
-$card-logo-width:                    7.25rem !default;
-$card-logo-height:                   4.125rem !default;
-
-$card-image-border-radius:           $card-border-radius !default;
-$card-logo-border-radius:            .25rem !default;
-
-$card-footer-text-font-size:         $x-small-font-size;
-
-$card-image-horizontal-max-width:    240px !default;
-$card-image-horizontal-min-width:    $card-image-horizontal-max-width !default;
-$card-image-vertical-max-height:     140px !default;
-$loading-skeleton-spacer:            .313rem !default;
-
-$card-focus-border-offset:           5px !default;
-$card-focus-border-width:            2px !default;
-$card-focus-border-radius:           5px !default;
+// $card-spacer-y:                      .75rem !default;
+// $card-spacer-x:                      1.25rem !default;
+// $card-border-width:                  $border-width !default;
+// $card-border-radius:                 $border-radius !default;
+// $card-border-color:                  rgba($black, .125) !default;
+// $card-border-focus-color:            rgba($black, .5) !default;
+// $card-border-focus-color-dark:       theme-color("primary", "focus") !default;
+// $card-inner-border-radius:           subtract($card-border-radius, $card-border-width) !default;
+// $card-cap-bg:                        rgba($black, .03) !default;
+// $card-cap-color:                     null !default;
+// $card-height:                        null !default;
+// $card-color:                         null !default;
+// $card-bg:                            $white !default;
+// $card-bg-dark:                       $primary-500 !default;
+// $card-bg-muted:                      $light-200 !default;
+
+// $card-img-overlay-padding:           1.25rem !default;
+
+// $card-group-margin:                  calc($grid-gutter-width / 2) !default;
+// $card-deck-margin:                   $card-group-margin !default;
+// $card-grid-margin:                   $card-group-margin !default;
+// $card-deck-margin-bottom:            map_get($spacers, 3) !default;
+// $card-grid-margin-bottom:            map_get($spacers, 3) !default;
+
+// $card-columns-count:                 3 !default;
+// $card-columns-gap:                   1.25rem !default;
+// $card-columns-margin:                $card-spacer-y !default;
+
+// $card-divider-bg:                    $light-400 !default;
+// $card-divider-margin-y:              $card-spacer-y !default;
+
+// $card-footer-actions-gap:            .5rem !default;
+
+// $card-logo-left-offset:              1.5rem !default;
+// $card-logo-bottom-offset:            1rem !default;
+// $card-logo-left-offset-horizontal:   .4375rem !default;
+// $card-logo-bottom-offset-horizontal: .4375rem !default;
+
+// $card-logo-width:                    7.25rem !default;
+// $card-logo-height:                   4.125rem !default;
+
+// $card-image-border-radius:           $card-border-radius !default;
+// $card-logo-border-radius:            .25rem !default;
+
+// $card-footer-text-font-size:         $x-small-font-size;
+
+// $card-image-horizontal-max-width:    240px !default;
+// $card-image-horizontal-min-width:    $card-image-horizontal-max-width !default;
+// $card-image-vertical-max-height:     140px !default;
+// $loading-skeleton-spacer:            .313rem !default;
+
+// $card-focus-border-offset:           5px !default;
+// $card-focus-border-width:            2px !default;
+// $card-focus-border-radius:           5px !default;
diff --git a/src/Card/index.scss b/src/Card/index.scss
@@ -1,7 +1,5 @@
 @import "card-bootstrap";
 
-$card-image-border-radius:           .3125rem !default;
-
 a .pgn__card,
 a.pgn__card {
   color: var(--pgn-color-gray-700);
@@ -295,8 +293,8 @@ a.pgn__card {
     object-fit: cover;
     max-height: inherit;
     width: 100%;
-    border-top-left-radius: $card-image-border-radius;
-    border-top-right-radius: $card-image-border-radius;
+    border-top-left-radius: var(--pgn-size-card-image-border-radius);
+    border-top-right-radius: var(--pgn-size-card-image-border-radius);
     display: none;
 
     &.show {
@@ -315,7 +313,7 @@ a.pgn__card {
       .pgn__card-image-cap {
         height: 100%;
         max-width: inherit;
-        border-radius: $card-image-border-radius 0 0 $card-image-border-radius;
+        border-radius: var(--pgn-size-card-image-border-radius) 0 0 var(--pgn-size-card-image-border-radius);
         width: auto;
         object-fit: cover;
       }

diff --git a/src/ChipCarousel/_variables.scss b/src/ChipCarousel/_variables.scss
diff --git a/src/ChipCarousel/index.scss b/src/ChipCarousel/index.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 .pgn__chip-carousel {
   position: relative;
 
@@ -19,7 +17,7 @@
   .pgn__chip-carousel__left-control {
     position: absolute;
     z-index: 2;
-    top: $chip-carousel-controls-top-offset;
+    top: calc(var(--pgn-spacing-chip-carousel-controls-top-offset) * -1);
   }
 
   .pgn__chip-carousel__right-control {

diff --git a/src/ColorPicker/_variables.scss b/src/ColorPicker/_variables.scss
diff --git a/src/ColorPicker/index.scss b/src/ColorPicker/index.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 .pgn__color-picker {
   box-shadow: 0 0 3px 1px var(--pgn-color-gray-300);
   border: none;
@@ -28,7 +26,7 @@
 .pgn__color-modal {
   background: var(--pgn-color-white);
   padding-bottom: .1rem;
-  margin-bottom: 1rem;
+  margin-bottom: var(--pgn-spacing-spacer-base);
 }
 
 .pgn__color-error {

diff --git a/src/DataTable/index.scss b/src/DataTable/index.scss
@@ -24,10 +24,10 @@
   display: flex;
 
   .pgn__data-table__visible-actions {
-    margin-inline-start: map_get($spacers, 2);
+    margin-inline-start: var(--pgn-spacing-spacer-2);
 
     .btn {
-      margin-inline-start: map_get($spacers, 2);
+      margin-inline-start: var(--pgn-spacing-spacer-2);
 
       &:first-child {
         margin-inline-start: 0;
@@ -55,7 +55,7 @@
     width: 100%;
     display: flex;
     align-items: center;
-    margin-top: map_get($spacers, 4);
+    margin-top: var(--pgn-spacing-spacer-4);
   }
 
   .pgn__icon-button-toggle__container {
@@ -95,18 +95,18 @@
     border-radius: var(--pgn-size-border-radius-base);
     box-shadow: var(--pgn-elevation-data-table-box-shadow);
     padding: var(--pgn-spacing-data-table-padding-small);
-    margin-right: map_get($spacers, 4);
+    margin-right: var(--pgn-spacing-spacer-4);
     flex: 0 0 var(--pgn-size-data-table-layout-sidebar-width);
   }
 
   .pgn__data-table-side-filters {
     .pgn__data-table-side-filters-title {
-      margin-bottom: map_get($spacers, 3);
+      margin-bottom: var(--pgn-spacing-spacer-3);
       text-align: start;
     }
 
     .pgn__data-table-side-filters-status {
-      margin-bottom: map_get($spacers, 2);
+      margin-bottom: var(--pgn-spacing-spacer-2);
       display: flex;
       justify-content: flex-end;
     }
@@ -167,7 +167,7 @@
 }
 
 .pgn__data-table-filters-breakout-filter {
-  margin-inline-end: map_get($spacers, 2);
+  margin-inline-end: var(--pgn-spacing-spacer-2);
 }
 
 .pgn__data-table-filters-dropdown-item {
@@ -252,12 +252,12 @@
   padding: 0 var(--pgn-spacing-data-table-padding-x);
 
   .pgn__data-table-card-view-default-skeleton-card-section {
-    margin-top: map_get($spacers, 2);
+    margin-top: var(--pgn-spacing-spacer-2);
   }
 }
 
 .pgn__data-table__action-btn {
-  margin-left: map_get($spacers, 2);
+  margin-left: var(--pgn-spacing-spacer-2);
 
   &:first-child {
     margin-left: 0;
@@ -274,7 +274,7 @@
 
 .pgn__data-table__overflow-actions-menu {
   background: var(--pgn-color-white);
-  padding: map_get($spacers, 2);
+  padding: var(--pgn-spacing-spacer-2);
   box-shadow: var(--pgn-elevation-box-shadow-level-1);
   border-radius: 4px;
 }
@@ -296,10 +296,10 @@
 
   &.selection-right {
     > :first-child {
-      margin-right: map_get($spacers, 2);
+      margin-right: var(--pgn-spacing-spacer-2);
 
       [dir="rtl"] & {
-        margin-left: map_get($spacers, 2);
+        margin-left: var(--pgn-spacing-spacer-2);
         margin-right: 0;
       }
     }
@@ -313,5 +313,5 @@
 .pgn__data-table__controlled-select {
   display: flex;
   align-content: center;
-  padding: map_get($spacers, 1);
+  padding: var(--pgn-spacing-spacer-1);
 }
diff --git a/src/Dropzone/index.scss b/src/Dropzone/index.scss
@@ -32,7 +32,7 @@
 
 .pgn__dropzone-generic-alert {
   width: 100%;
-  margin-bottom: map_get($spacers, 4);
+  margin-bottom: var(--pgn-spacing-spacer-4);
 
   .pgn__alert-message-wrapper .alert-message-content {
     > span {
@@ -47,7 +47,7 @@
   background: var(--pgn-color-light-300);
   border-radius: 50%;
   position: relative;
-  margin-bottom: map-get($spacers, 4);
+  margin-bottom: var(--pgn-spacing-spacer-4);
 }
 
 .pgn__dropzone__upload-icon {

diff --git a/src/Form/_index.scss b/src/Form/_index.scss
@@ -1,4 +1,3 @@
-@import "variables";
 @import "bootstrap-forms";
 @import "input-group";
 @import "bootstrap-custom-forms";

diff --git a/src/Form/_variables.scss b/src/Form/_variables.scss
diff --git a/src/Hyperlink/index.scss b/src/Hyperlink/index.scss
@@ -4,6 +4,6 @@
   &__external-icon {
     display: inline-block;
     vertical-align: middle;
-    margin-inline-start: map_get($spacers, 2);
+    margin-inline-start: var(--pgn-spacing-spacer-2);
   }
 }
diff --git a/src/IconButton/_mixins.scss b/src/IconButton/_mixins.scss
@@ -0,0 +1,4 @@
+@mixin btn-icon-size($icon-size) {
+  width: $icon-size;
+  height: $icon-size;
+}
diff --git a/src/IconButton/index.scss b/src/IconButton/index.scss
@@ -1,7 +1,4 @@
-@mixin btn-icon-size($icon-size) {
-  width: $icon-size;
-  height: $icon-size;
-}
+@import "mixins";
 
 .btn-icon {
   @include btn-icon-size(var(--pgn-size-icon-button-diameter-md));

diff --git a/src/IconButtonToggle/index.scss b/src/IconButtonToggle/index.scss
@@ -2,6 +2,6 @@
   display: flex;
 
   .btn-icon + .btn-icon {
-    margin-inline-start: map_get($spacers, 1);
+    margin-inline-start: var(--pgn-spacing-spacer-1);
   }
 }
diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss
@@ -311,7 +311,7 @@
 
     .pgn__alert-modal__title_icon {
       flex-shrink: 0;
-      margin-right: map-get($spacers, 2\.5);
+      margin-right: var(--pgn-spacing-spacer-2-5);
     }
   }
 }
diff --git a/src/Nav/_mixins.scss b/src/Nav/_mixins.scss
@@ -14,7 +14,7 @@
     right: calc(#{$distance} * -1);
     bottom: calc(#{$distance} * -1);
     left: calc(#{$distance} * -1);
-    border: solid var(--pgn-size-nav-tabs-border-width) $border-color;
+    border: solid var(--pgn-size-nav-tabs-border-width) $tabs-border-color;
     border-radius: $radius;
   }
 }