feat: expanded --pgn-transition-carousel-base token, some refactoring

openedx · Sep 25, 2024 · 24fd229 · 24fd229
1 parent 9726e14
commit 24fd229
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 19 deletions.
diff --git a/src/Carousel/index.scss b/src/Carousel/index.scss
@@ -1,9 +1,13 @@
 :root {
   --pgn-transition-carousel-base:
-    var(--pgn-transition-carousel-base-property)
-    var(--pgn-transition-carousel-base-duration)
-    var(--pgn-transition-carousel-base-timing-function)
-    var(--pgn-transition-carousel-base-delay);
+    var(--pgn-transition-carousel-base-1-property)
+    var(--pgn-transition-carousel-base-1-duration)
+    var(--pgn-transition-carousel-base-1-timing-function)
+    var(--pgn-transition-carousel-base-1-delay),
+    var(--pgn-transition-carousel-base-2-property)
+    var(--pgn-transition-carousel-base-2-duration)
+    var(--pgn-transition-carousel-base-2-timing-function)
+    var(--pgn-transition-carousel-base-2-delay);
 
   --pgn-transition-carousel-indicator:
     var(--pgn-transition-carousel-indicator-property)
@@ -78,7 +82,7 @@
   .active.carousel-item-right {
     z-index: 0;
     opacity: 0;
-    transition: opacity 0s, var(--pgn-transition-carousel-base);
+    transition: var(--pgn-transition-carousel-base);
   }
 }
 

diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -93,10 +93,14 @@
   --pgn-transition-carousel-indicator-duration: var(--pgn-transition-carousel-duration);
   --pgn-transition-carousel-indicator-property: opacity;
   --pgn-transition-carousel-duration: 0.6s;
-  --pgn-transition-carousel-base-timing-function: ease-in-out;
-  --pgn-transition-carousel-base-delay: 0ms;
-  --pgn-transition-carousel-base-duration: var(--pgn-transition-carousel-duration);
-  --pgn-transition-carousel-base-property: transform;
+  --pgn-transition-carousel-base-2-timing-function: ease-in-out;
+  --pgn-transition-carousel-base-2-delay: 0ms;
+  --pgn-transition-carousel-base-2-duration: var(--pgn-transition-carousel-duration);
+  --pgn-transition-carousel-base-2-property: transform;
+  --pgn-transition-carousel-base-1-timing-function: ease;
+  --pgn-transition-carousel-base-1-delay: 0ms;
+  --pgn-transition-carousel-base-1-duration: 0ms;
+  --pgn-transition-carousel-base-1-property: opacity;
   --pgn-transition-btn: none;
   --pgn-transition-badge: none;
   --pgn-typography-print-page-size: a3;

diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json
@@ -29,12 +29,20 @@
     "carousel": {
       "base": {
         "source": "$carousel-transition",
-        "$value": {
-          "property": "transform",
-          "duration": "{transition.carousel.duration}",
-          "delay": "0ms",
-          "timingFunction": "ease-in-out"
-        }
+        "$value": [
+          {
+            "property": "opacity",
+            "duration": "0ms",
+            "delay": "0ms",
+            "timingFunction": "ease"
+          },
+          {
+            "property": "transform",
+            "duration": "{transition.carousel.duration}",
+            "delay": "0ms",
+            "timingFunction": "ease-in-out"
+          }
+        ]
       },
       "duration": { "source": "$carousel-transition-duration", "$value": ".6s", "$type": "duration" },
       "indicator": {

diff --git a/tokens/utils.js b/tokens/utils.js
@@ -4,6 +4,8 @@ const path = require('path');
 
 const visitedTokens = {};
 
+const commonCssFiles = ['variables.css', 'abstraction-variables.css'];
+
 /**
  * Finds a token by its path in the token tree.
  * @param {string} path - The path to the token in the token tree.
@@ -334,11 +336,17 @@ function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css'
     }
 
     const outputCssFiles = files.filter(file => file !== 'index.css');
-    // When creating themes, there are typically two files: one for utility classes and one for variables.
-    // It's organized them to allow variables be reading first.
-    if (isThemeVariant) { outputCssFiles.reverse(); }
 
-    const exportStatements = outputCssFiles.map((file) => `@import "${file}";`);
+    // For theme variants, files are ordered with variables first, abstraction variables second,
+    // and utility classes last. This ensures that variables are available before other files use them.
+    // For the core styles, custom media breakpoints replace utility classes in the order.
+    const sortOrder = isThemeVariant
+      ? [...commonCssFiles, 'utility-classes.css']
+      : [...commonCssFiles, 'custom-media-breakpoints.css'];
+
+    const sortedCssFiles = outputCssFiles.sort((a, b) => sortOrder.indexOf(a) - sortOrder.indexOf(b));
+
+    const exportStatements = sortedCssFiles.map((file) => `@import "${file}";`);
 
     const indexContent = `${exportStatements.join('\n')}\n`;