refactor: fixed spacing calculations and box-shadows

openedx · Sep 8, 2023 · 2695b87 · 2695b87
1 parent 09570d7
commit 2695b87
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 22 deletions.
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -461,17 +461,17 @@
   --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm);
   --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm);
   --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal);
-  --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4rem);
-  --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2rem);
-  --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25rem);
-  --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75rem);
-  --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375rem);
-  --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5rem);
-  --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3rem);
-  --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5rem);
+  --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4);
+  --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2);
+  --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25);
+  --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75);
+  --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375);
+  --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5);
+  --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3);
+  --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5);
   --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5rem);
-  --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25rem);
+  --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5);
+  --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25);
   --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
   --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
   --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);

diff --git a/styles/scss/core/_variables.scss b/styles/scss/core/_variables.scss
@@ -320,7 +320,7 @@ $escaped-characters: (
 
 $enable-caret:                                true !default;
 $enable-rounded:                              true !default;
-$enable-shadows:                              false !default;
+$enable-shadows:                              true !default;
 $enable-gradients:                            false !default;
 $enable-transitions:                          true !default;
 $enable-prefers-reduced-motion-media-query:   true !default;

diff --git a/tokens/src/core/global/spacing.json b/tokens/src/core/global/spacing.json
@@ -3,17 +3,17 @@
     "spacer": {
       "base": { "value": "1rem", "type": "dimension", "source": "$spacer", "description": "Basic space value" },
       "0": { "value": "0", "type": "dimension", "description": "Space value of level 0" },
-      "1": { "value": "calc({spacing.spacer.base} * .25rem)", "type": "dimension", "description": "Space value of level 1" },
-      "1,5": { "value": "calc({spacing.spacer.base} * .375rem)", "type": "dimension", "description": "Space value of level 1.5" },
-      "2": { "value": "calc({spacing.spacer.base} * .5rem)", "type": "dimension", "description": "Space value of level 2" },
-      "2,5": { "value": "calc({spacing.spacer.base} * .75rem)", "type": "dimension", "description": "Space value of level 2.5" },
+      "1": { "value": "calc({spacing.spacer.base} * .25)", "type": "dimension", "description": "Space value of level 1" },
+      "1,5": { "value": "calc({spacing.spacer.base} * .375)", "type": "dimension", "description": "Space value of level 1.5" },
+      "2": { "value": "calc({spacing.spacer.base} * .5)", "type": "dimension", "description": "Space value of level 2" },
+      "2,5": { "value": "calc({spacing.spacer.base} * .75)", "type": "dimension", "description": "Space value of level 2.5" },
       "3": { "value": "{spacing.spacer.base}", "type": "dimension", "description": "Space value of level 3" },
-      "3,5": { "value": "calc({spacing.spacer.base} * 1.25rem)", "type": "dimension", "description": "Space value of level 3.5"},
-      "4": { "value": "calc({spacing.spacer.base} * 1.5rem)", "type": "dimension", "description": "Space value of level 4" },
-      "4,5": { "value": "calc({spacing.spacer.base} * 2rem)", "type": "dimension", "description": "Space value of level 4.5" },
-      "5": { "value": "calc({spacing.spacer.base} * 3rem)", "type": "dimension", "description": "Space value of level 5" },
-      "5,5": { "value": "calc({spacing.spacer.base} * 4rem)", "type": "dimension", "description": "Space value of level 5.5"},
-      "6": { "value": "calc({spacing.spacer.base} * 5rem)", "type": "dimension", "description": "Space value of level 6" }
+      "3,5": { "value": "calc({spacing.spacer.base} * 1.25)", "type": "dimension", "description": "Space value of level 3.5"},
+      "4": { "value": "calc({spacing.spacer.base} * 1.5)", "type": "dimension", "description": "Space value of level 4" },
+      "4,5": { "value": "calc({spacing.spacer.base} * 2)", "type": "dimension", "description": "Space value of level 4.5" },
+      "5": { "value": "calc({spacing.spacer.base} * 3)", "type": "dimension", "description": "Space value of level 5" },
+      "5,5": { "value": "calc({spacing.spacer.base} * 4)", "type": "dimension", "description": "Space value of level 5.5"},
+      "6": { "value": "calc({spacing.spacer.base} * 5)", "type": "dimension", "description": "Space value of level 6" }
     },
     "label": {
       "margin-bottom": { "value": ".5rem", "type": "dimension", "description": "Margin bottom for label." }

diff --git a/www/src/templates/component-page-template.tsx b/www/src/templates/component-page-template.tsx
@@ -142,7 +142,7 @@ export default function PageTemplate({
         <MDXProvider components={shortcodes}>
           <MDXRenderer>{mdx.body}</MDXRenderer>
         </MDXProvider>
-        {!!cssVariablesData.length && (
+        {!!cssVariablesData?.length && (
           <div className="mb-5">
             <h2 className="mb-4 pgn-doc__heading" id={cssVariablesUrl}>
               {cssVariablesTitle}