refactor: code refactoring

openedx · Sep 10, 2024 · 2311ec1 · 2311ec1
1 parent 5bb6107
commit 2311ec1
Show file tree

Hide file tree

Showing 9 changed files with 366 additions and 394 deletions.
diff --git a/lib/build-tokens.js b/lib/build-tokens.js
@@ -54,7 +54,6 @@ async function buildTokensCommand(commandArgs) {
       path.resolve(__dirname, '../tokens/src/core/**/*.json'),
       path.resolve(__dirname, '../tokens/src/core/**/*.toml'),
     ],
-    expand: true,
     source: tokensSource
       ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`]
       : [],

diff --git a/src/Annotation/index.scss b/src/Annotation/index.scss
@@ -10,7 +10,7 @@
       var(--pgn-elevation-annotation-box-shadow-1-offset-y)
       var(--pgn-elevation-annotation-box-shadow-1-blur)
       var(--pgn-elevation-annotation-box-shadow-1-color)
-    ),
+    )
     drop-shadow(
       var(--pgn-elevation-annotation-box-shadow-2-offset-x)
       var(--pgn-elevation-annotation-box-shadow-2-offset-y)

diff --git a/src/Tooltip/index.scss b/src/Tooltip/index.scss
@@ -17,7 +17,7 @@
       var(--pgn-elevation-tooltip-box-shadow-1-offset-y)
       var(--pgn-elevation-tooltip-box-shadow-1-blur)
       var(--pgn-elevation-tooltip-box-shadow-1-color)
-    ),
+    )
     drop-shadow(
       var(--pgn-elevation-tooltip-box-shadow-2-offset-x)
       var(--pgn-elevation-tooltip-box-shadow-2-offset-y)

diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -90,7 +90,7 @@
   --pgn-typography-font-size-micro: 0.688rem; /* Micro utils text font size. */
   --pgn-typography-font-size-xs: 0.75rem; /* X-small font size. */
   --pgn-typography-font-size-sm: 0.875rem; /* Small font size. */
-  --pgn-typography-font-size-lg: var(--pgn-typography-font-size-base) * 1.25; /* Lead text font size. */
+  --pgn-typography-font-size-lg: calc(var(--pgn-typography-font-size-base) * 1.25); /* Lead text font size. */
   --pgn-typography-font-size-base: 1.125rem; /* Base font size. */
   --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Monospace font family. */
   --pgn-typography-font-family-serif: serif; /* Serif font family. */
@@ -162,7 +162,7 @@
   --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base);
   --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold);
   --pgn-typography-code-kbd-font-size: var(--pgn-typography-code-font-size);
-  --pgn-typography-code-font-size: 87.5%;
+  --pgn-typography-code-font-size: var(--pgn-typography-font-size-sm);
   --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold);
   --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5);
   --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-xs);

diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
diff --git a/styles/scss/core/_variables.scss b/styles/scss/core/_variables.scss
diff --git a/tokens/src/core/components/Code.json b/tokens/src/core/components/Code.json
@@ -1,7 +1,7 @@
 {
   "typography": {
     "code": {
-      "font-size": { "source": "$code-font-size", "$value": "87.5%", "$type": "percentage" },
+      "font-size": { "source": "$code-font-size", "$value": "{typography.font.size.sm}", "$type": "percentage" },
       "kbd": {
         "font-size": { "source": "$kbd-font-size", "$value": "{typography.code.font-size}", "$type": "dimension" },
         "nested": {

diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json
@@ -35,7 +35,7 @@
         },
         "lg": {
           "source": "$lead-font-size",
-          "$value": "{typography.font.size.base} * 1.25",
+          "$value": "calc({typography.font.size.base} * 1.25)",
           "$description": "Lead text font size."
         },
         "sm": {

diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json
@@ -47,12 +47,11 @@
               "$value": [
                 {
                   "color": "{color.body.bg}",
-                  "spread": "1px",
+                  "spread": "0",
                   "offsetX": "0",
-                  "offsetY": "0",
-                  "blur": "0"
-                },
-                "{size.form.input.width.focus}"
+                  "offsetY": ".1rem",
+                  "blur": ".25rem"
+                }
               ]
             }
           }