refactor: refactor styles

openedx · Sep 27, 2022 · b29267f · b29267f
1 parent adef627
commit b29267f
Show file tree

Hide file tree

Showing 10 changed files with 17 additions and 17 deletions.
diff --git a/scss/core/tokens.css b/scss/core/tokens.css
@@ -139,7 +139,7 @@
   --pgn-core-input-btn-font-size-lg: 1.325rem;
   --pgn-core-input-btn-font-size-sm: .875rem;
   --pgn-core-input-btn-font-size-base: 1.125rem;
-  --pgn-core-input-btn-font-family: null;
+  --pgn-core-input-btn-font-family: inherit;
   --pgn-core-input-btn-padding-lg-x: 1.25rem;
   --pgn-core-input-btn-padding-lg-y: .6875rem;
   --pgn-core-input-btn-padding-sm-x: .75rem;
@@ -417,6 +417,7 @@
   --pgn-card-cap-color: null;
   --pgn-card-cap-bg: rgba(0, 0, 0, .03);
   --pgn-card-border-color-focus: rgba(0, 0, 0, .5);
+  --pgn-card-border-color-base: rgba(0, 0, 0, .125);
   --pgn-card-border-radius-logo: .25rem;
   --pgn-card-border-radius-image: .3125rem;
   --pgn-card-spacer-y: .75rem;
@@ -759,7 +760,6 @@
   --pgn-card-margin-deck: var(--pgn-card-margin-group);
   --pgn-card-image-horizontal-width-min: var(--pgn-card-image-horizontal-width-max);
   --pgn-card-bg: var(--pgn-color-white);
-  --pgn-card-border-color-base: rgba(var(--pgn-color-black), .125);
   --pgn-card-border-radius-base: var(--pgn-border-radius-base);
   --pgn-card-border-width: var(--pgn-border-width);
   --pgn-btn-tertiary-inverse-bg-hover: rgba(var(--pgn-color-white), .1);

diff --git a/src/Button/Button.scss b/src/Button/Button.scss
@@ -142,8 +142,8 @@ $btn-size-line-height, $btn-size-border-radius) {
     outline: 0;
     box-shadow: none;
 
-    $distance: var(--pgn-btn-focus-width) + var(--pgn-btn-focus-gap);
-    $distance-include-btn-border: $distance + var(--pgn-btn-border-width);
+    $distance: calc(var(--pgn-btn-focus-width) + var(--pgn-btn-focus-gap));
+    $distance-include-btn-border: calc($distance + var(--pgn-btn-border-width));
 
     &::before {
       content: "";
@@ -153,7 +153,7 @@ $btn-size-line-height, $btn-size-border-radius) {
       bottom: calc(#{$distance-include-btn-border} * -1);
       left: calc(#{$distance-include-btn-border} * -1);
       border: solid var(--pgn-btn-focus-width) $ring-color;
-      border-radius: calc(#{var(--pgn-btn-border-radius-base)} + #{$distance});
+      border-radius: calc(#{$btn-border-radius} + #{$distance});
     }
 
     &.btn-lg::before {
@@ -206,7 +206,7 @@ $btn-size-line-height, $btn-size-border-radius) {
   border: var(--pgn-btn-border-width) solid transparent;
 
   @include button-size(var(--pgn-btn-padding-y-base), var(--pgn-btn-padding-x-base), var(--pgn-btn-font-size-base),
-  var(--pgn-btn-line-height-base), var(--pgn-btn-border-radius-base));
+  var(--pgn-btn-line-height-base), $btn-border-radius);
   @include transition(var(--pgn-btn-transition));
 
   @include hover {

diff --git a/src/Form/_mixins.scss b/src/Form/_mixins.scss
@@ -25,6 +25,6 @@
     $half-leading: calc(($line-height - .8) / 2);
     $percent-height-minus-no-bottom-leading: calc((($line-height - $half-leading) / $line-height) * 100%);
 
-    transform: translateY(-$padding-y) scale(.75)  translateY(calc($percent-height-minus-no-bottom-leading * -1));
+    transform: translateY(calc($padding-y * -1)) scale(.75)  translateY(calc($percent-height-minus-no-bottom-leading * -1));
   }
 }
diff --git a/src/Form/_variables.scss b/src/Form/_variables.scss
@@ -94,7 +94,7 @@ $custom-control-label-color:            null !default;
 $custom-control-indicator-disabled-bg:          $input-disabled-bg !default;
 $custom-control-label-disabled-color:           theme-color("gray", "light-text") !default;
 
-$custom-control-indicator-checked-color:        var(--pgn-component-active-bg) !default;
+$custom-control-indicator-checked-color:        $component-active-bg !default;
 $custom-control-indicator-checked-bg:           var(--pgn-component-active-bg) !default;
 $custom-control-indicator-checked-disabled-bg:  rgba(var(--pgn-color-primary-base), .5) !default;
 $custom-control-indicator-checked-box-shadow:   none !default;
@@ -103,7 +103,7 @@ $custom-control-indicator-checked-border-color: $custom-control-indicator-checke
 $custom-control-indicator-focus-box-shadow:     0 0 0 4px rgba(0, 0, 0, .1) !default;
 $custom-control-indicator-focus-border-color:   $input-focus-border-color !default;
 
-$custom-control-indicator-active-color:         var(--pgn-component-active-color) !default;
+$custom-control-indicator-active-color:         $component-active-color !default;
 $custom-control-indicator-active-bg:            var(--pgn-component-active-bg) !default;
 $custom-control-indicator-active-box-shadow:    none !default;
 $custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;

diff --git a/src/Modal/_variables.scss b/src/Modal/_variables.scss
@@ -15,7 +15,7 @@ $modal-content-color:               null !default;
 $modal-content-bg:                  var(--pgn-color-white) !default;
 $modal-content-border-color:        rgba(var(--pgn-color-black), .2) !default;
 $modal-content-border-width:        0 !default;
-$modal-content-border-radius:       var(--pgn-border-radius-lg) !default;
+$modal-content-border-radius:       $border-radius-lg !default;
 $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
 $modal-content-box-shadow-xs:       0 .25rem .5rem rgba(var(--pgn-color-black), .5) !default;
 $modal-content-box-shadow-sm-up:    0 10px 20px rgba(var(--pgn-color-black), .15),

diff --git a/tokens/build/_variables.scss b/tokens/build/_variables.scss
@@ -138,7 +138,7 @@ $pgn-core-input-btn-line-height-base: 1.3333 !default;
 $pgn-core-input-btn-font-size-lg: 1.325rem !default;
 $pgn-core-input-btn-font-size-sm: .875rem !default;
 $pgn-core-input-btn-font-size-base: 1.125rem !default;
-$pgn-core-input-btn-font-family: null !default;
+$pgn-core-input-btn-font-family: inherit !default;
 $pgn-core-input-btn-padding-lg-x: 1.25rem !default;
 $pgn-core-input-btn-padding-lg-y: .6875rem !default;
 $pgn-core-input-btn-padding-sm-x: .75rem !default;
@@ -416,6 +416,7 @@ $pgn-card-height-base: null !default;
 $pgn-card-cap-color: null !default;
 $pgn-card-cap-bg: rgba(0, 0, 0, .03) !default;
 $pgn-card-border-color-focus: rgba(0, 0, 0, .5) !default;
+$pgn-card-border-color-base: rgba(0, 0, 0, .125) !default;
 $pgn-card-border-radius-logo: .25rem !default;
 $pgn-card-border-radius-image: .3125rem !default;
 $pgn-card-spacer-y: .75rem !default;
@@ -758,7 +759,6 @@ $pgn-card-margin-grid: $pgn-card-margin-group !default;
 $pgn-card-margin-deck: $pgn-card-margin-group !default;
 $pgn-card-image-horizontal-width-min: $pgn-card-image-horizontal-width-max !default;
 $pgn-card-bg: $pgn-color-white !default;
-$pgn-card-border-color-base: rgba($pgn-color-black, .125) !default;
 $pgn-card-border-radius-base: $pgn-border-radius-base !default;
 $pgn-card-border-width: $pgn-border-width !default;
 $pgn-btn-tertiary-inverse-bg-hover: rgba($pgn-color-white, .1) !default;

diff --git a/tokens/build/scss-to-css-components.json b/tokens/build/scss-to-css-components.json
diff --git a/tokens/build/variables.css b/tokens/build/variables.css
@@ -139,7 +139,7 @@
   --pgn-core-input-btn-font-size-lg: 1.325rem;
   --pgn-core-input-btn-font-size-sm: .875rem;
   --pgn-core-input-btn-font-size-base: 1.125rem;
-  --pgn-core-input-btn-font-family: null;
+  --pgn-core-input-btn-font-family: inherit;
   --pgn-core-input-btn-padding-lg-x: 1.25rem;
   --pgn-core-input-btn-padding-lg-y: .6875rem;
   --pgn-core-input-btn-padding-sm-x: .75rem;
@@ -417,6 +417,7 @@
   --pgn-card-cap-color: null;
   --pgn-card-cap-bg: rgba(0, 0, 0, .03);
   --pgn-card-border-color-focus: rgba(0, 0, 0, .5);
+  --pgn-card-border-color-base: rgba(0, 0, 0, .125);
   --pgn-card-border-radius-logo: .25rem;
   --pgn-card-border-radius-image: .3125rem;
   --pgn-card-spacer-y: .75rem;
@@ -759,7 +760,6 @@
   --pgn-card-margin-deck: var(--pgn-card-margin-group);
   --pgn-card-image-horizontal-width-min: var(--pgn-card-image-horizontal-width-max);
   --pgn-card-bg: var(--pgn-color-white);
-  --pgn-card-border-color-base: rgba(var(--pgn-color-black), .125);
   --pgn-card-border-radius-base: var(--pgn-border-radius-base);
   --pgn-card-border-width: var(--pgn-border-width);
   --pgn-btn-tertiary-inverse-bg-hover: rgba(var(--pgn-color-white), .1);

diff --git a/tokens/source/components/Card/Card.tokens.json b/tokens/source/components/Card/Card.tokens.json
@@ -12,7 +12,7 @@
         "logo": { "value": ".25rem", "themeable": true, "source": "$card-logo-border-radius" }
       },
       "color": {
-        "base": { "value": "rgba({color.black.value}, .125)", "themeable": true, "source": "$card-border-color" },
+        "base": { "value": "rgba(0, 0, 0, .125)", "themeable": true, "source": "$card-border-color" },
         "focus": { "value": "rgba(0, 0, 0, .5)", "themeable": true, "source": "$card-border-focus-color" }
       }
     },

diff --git a/tokens/source/core/core.tokens.json b/tokens/source/core/core.tokens.json
@@ -16,7 +16,7 @@
           }
         },
         "font": {
-          "family": { "value": "null", "themeable": true, "source": "$input-btn-font-family" },
+          "family": { "value": "inherit", "themeable": true, "source": "$input-btn-font-family" },
           "size": {
             "base": { "value": "1.125rem", "themeable": true, "source": "$input-btn-font-size" },
             "sm": { "value": ".875rem", "themeable": true, "source": "$input-btn-font-size-sm" },