refactor: some refactoring and updates

openedx · Oct 17, 2024 · 2786dd4 · 2786dd4
1 parent cf98934
commit 2786dd4
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 133 deletions.
diff --git a/src/Carousel/index.scss b/src/Carousel/index.scss
@@ -1,25 +1,24 @@
 :root {
   --pgn-transition-carousel-base:
-    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);
+    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-behavior);
 
   --pgn-transition-carousel-indicator:
     var(--pgn-transition-carousel-indicator-property)
     var(--pgn-transition-carousel-indicator-duration)
     var(--pgn-transition-carousel-indicator-timing-function)
-    var(--pgn-transition-carousel-indicator-delay);
+    var(--pgn-transition-carousel-indicator-delay)
+    var(--pgn-transition-carousel-indicator-behavior);
 
   --pgn-transition-carousel-control:
     var(--pgn-transition-carousel-control-property)
     var(--pgn-transition-carousel-control-duration)
     var(--pgn-transition-carousel-control-timing-function)
-    var(--pgn-transition-carousel-control-delay);
+    var(--pgn-transition-carousel-control-delay)
+    var(--pgn-transition-carousel-control-behavior);
 }
 
 .carousel {

diff --git a/styles/css/core/abstraction-variables.css b/styles/css/core/abstraction-variables.css
@@ -41,36 +41,4 @@
     var(--pgn-transition-form-input-2-timing-function)
     var(--pgn-transition-form-input-2-delay)
     var(--pgn-transition-form-input-2-behavior);
-
-  /**
-   * TYPOGRAPHY
-   */
-  --pgn-typography-font-family-sans-serif:
-    var(--pgn-typography-font-family-sans-serif-primary),
-    var(--pgn-typography-font-family-sans-serif-secondary),
-    var(--pgn-typography-font-family-sans-serif-tertiary),
-    var(--pgn-typography-font-family-sans-serif-alternate-1),
-    var(--pgn-typography-font-family-sans-serif-alternate-2),
-    var(--pgn-typography-font-family-sans-serif-alternate-3),
-    var(--pgn-typography-font-family-sans-serif-alternate-4),
-    var(--pgn-typography-font-family-sans-serif-fallback);
-
-  --pgn-typography-font-family-monospace:
-    var(--pgn-typography-font-family-monospace-primary),
-    var(--pgn-typography-font-family-monospace-secondary),
-    var(--pgn-typography-font-family-monospace-tertiary),
-    var(--pgn-typography-font-family-monospace-alternate-1),
-    var(--pgn-typography-font-family-monospace-alternate-2),
-    var(--pgn-typography-font-family-monospace-legacy),
-    var(--pgn-typography-font-family-monospace-fallback);
-
-  --pgn-typography-font-family-base:
-    var(--pgn-typography-font-family-base-primary),
-    var(--pgn-typography-font-family-base-secondary),
-    var(--pgn-typography-font-family-base-tertiary),
-    var(--pgn-typography-font-family-base-alternate-1),
-    var(--pgn-typography-font-family-base-alternate-2),
-    var(--pgn-typography-font-family-base-alternate-3),
-    var(--pgn-typography-font-family-base-alternate-4),
-    var(--pgn-typography-font-family-base-fallback);
-}
+}
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -30,27 +30,27 @@
   --pgn-elevation-modal-zindex: 1050;
   --pgn-elevation-modal-backdrop-zindex: 1040;
   --pgn-elevation-dropdown-zindex: 1000;
-  --pgn-transition-collapse-width-behavior: unset; /* Collapse transition for width that takes 350ms */
+  --pgn-transition-collapse-width-behavior: normal; /* Collapse transition for width that takes 350ms */
   --pgn-transition-collapse-width-delay: 0s; /* Collapse transition for width that takes 350ms */
   --pgn-transition-collapse-width-timing-function: ease; /* Collapse transition for width that takes 350ms */
   --pgn-transition-collapse-width-duration: 0.35s; /* Collapse transition for width that takes 350ms */
   --pgn-transition-collapse-width-property: width; /* Collapse transition for width that takes 350ms */
-  --pgn-transition-collapse-height-behavior: unset; /* Collapse transition for height that takes 350ms */
+  --pgn-transition-collapse-height-behavior: normal; /* Collapse transition for height that takes 350ms */
   --pgn-transition-collapse-height-delay: 0s; /* Collapse transition for height that takes 350ms */
   --pgn-transition-collapse-height-timing-function: ease; /* Collapse transition for height that takes 350ms */
   --pgn-transition-collapse-height-duration: 0.35s; /* Collapse transition for height that takes 350ms */
   --pgn-transition-collapse-height-property: height; /* Collapse transition for height that takes 350ms */
-  --pgn-transition-fade-behavior: unset; /* Opacity transition that takes 150ms */
+  --pgn-transition-fade-behavior: normal; /* Opacity transition that takes 150ms */
   --pgn-transition-fade-delay: 0s; /* Opacity transition that takes 150ms */
   --pgn-transition-fade-timing-function: linear; /* Opacity transition that takes 150ms */
   --pgn-transition-fade-duration: 0.15s; /* Opacity transition that takes 150ms */
   --pgn-transition-fade-property: opacity; /* Opacity transition that takes 150ms */
-  --pgn-transition-base-behavior: unset; /* Generic transition for any property change */
+  --pgn-transition-base-behavior: normal; /* Generic transition for any property change */
   --pgn-transition-base-delay: 0s; /* Generic transition for any property change */
   --pgn-transition-base-timing-function: ease-in-out; /* Generic transition for any property change */
   --pgn-transition-base-duration: 0.2s; /* Generic transition for any property change */
   --pgn-transition-base-property: all; /* Generic transition for any property change */
-  --pgn-transition-progress-bar-transition-behavior: unset;
+  --pgn-transition-progress-bar-transition-behavior: normal;
   --pgn-transition-progress-bar-transition-delay: 0s;
   --pgn-transition-progress-bar-transition-timing-function: ease;
   --pgn-transition-progress-bar-transition-duration: 0.6s;
@@ -59,48 +59,47 @@
   --pgn-transition-progress-bar-animation-timing-delay: 0s;
   --pgn-transition-progress-bar-animation-timing-timing-function: linear;
   --pgn-transition-progress-bar-animation-timing-duration: 1s;
-  --pgn-transition-form-control-3-behavior: unset;
+  --pgn-transition-form-control-3-behavior: normal;
   --pgn-transition-form-control-3-delay: 0s;
   --pgn-transition-form-control-3-timing-function: ease-in-out;
   --pgn-transition-form-control-3-duration: 0.15s;
   --pgn-transition-form-control-3-property: box-shadow;
-  --pgn-transition-form-control-2-behavior: unset;
+  --pgn-transition-form-control-2-behavior: normal;
   --pgn-transition-form-control-2-delay: 0s;
   --pgn-transition-form-control-2-timing-function: ease-in-out;
   --pgn-transition-form-control-2-duration: 0.15s;
   --pgn-transition-form-control-2-property: border-color;
-  --pgn-transition-form-control-1-behavior: unset;
+  --pgn-transition-form-control-1-behavior: normal;
   --pgn-transition-form-control-1-delay: 0s;
   --pgn-transition-form-control-1-timing-function: ease-in-out;
   --pgn-transition-form-control-1-duration: 0.15s;
   --pgn-transition-form-control-1-property: background-color;
-  --pgn-transition-form-input-2-behavior: unset;
+  --pgn-transition-form-input-2-behavior: normal;
   --pgn-transition-form-input-2-delay: 0s;
   --pgn-transition-form-input-2-timing-function: ease-in-out;
   --pgn-transition-form-input-2-duration: 0.15s;
   --pgn-transition-form-input-2-property: box-shadow;
-  --pgn-transition-form-input-1-behavior: unset;
+  --pgn-transition-form-input-1-behavior: normal;
   --pgn-transition-form-input-1-delay: 0s;
   --pgn-transition-form-input-1-timing-function: ease-in-out;
   --pgn-transition-form-input-1-duration: 0.15s;
   --pgn-transition-form-input-1-property: border-color;
-  --pgn-transition-carousel-control-timing-function: ease;
+  --pgn-transition-carousel-control-behavior: normal;
   --pgn-transition-carousel-control-delay: 0ms;
+  --pgn-transition-carousel-control-timing-function: ease;
   --pgn-transition-carousel-control-duration: 0.15s;
   --pgn-transition-carousel-control-property: opacity;
-  --pgn-transition-carousel-indicator-timing-function: ease;
+  --pgn-transition-carousel-indicator-behavior: normal;
   --pgn-transition-carousel-indicator-delay: 0ms;
+  --pgn-transition-carousel-indicator-timing-function: ease;
   --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-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-carousel-base-behavior: normal;
+  --pgn-transition-carousel-base-delay: 0ms;
+  --pgn-transition-carousel-base-timing-function: ease-in-out;
+  --pgn-transition-carousel-base-duration: var(--pgn-transition-carousel-duration);
+  --pgn-transition-carousel-base-property: transform;
   --pgn-transition-btn: none;
   --pgn-transition-badge: none;
   --pgn-typography-print-page-size: a3;
@@ -148,30 +147,10 @@
   --pgn-typography-font-size-sm: 0.875rem; /* Small 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-fallback: monospace; /* Monospace font family. */
-  --pgn-typography-font-family-monospace-legacy: Courier New; /* Monospace font family. */
-  --pgn-typography-font-family-monospace-alternate-2: Liberation Mono; /* Monospace font family. */
-  --pgn-typography-font-family-monospace-alternate-1: Consolas; /* Monospace font family. */
-  --pgn-typography-font-family-monospace-tertiary: Monaco; /* Monospace font family. */
-  --pgn-typography-font-family-monospace-secondary: Menlo; /* Monospace font family. */
-  --pgn-typography-font-family-monospace-primary: SFMono-Regular; /* Monospace font family. */
+  --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. */
-  --pgn-typography-font-family-sans-serif-fallback: sans-serif; /* Sans-serif font family. */
-  --pgn-typography-font-family-sans-serif-alternate-4: 'Noto Sans'; /* Sans-serif font family. */
-  --pgn-typography-font-family-sans-serif-alternate-3: Arial; /* Sans-serif font family. */
-  --pgn-typography-font-family-sans-serif-alternate-2: 'Helvetica Neue'; /* Sans-serif font family. */
-  --pgn-typography-font-family-sans-serif-alternate-1: Roboto; /* Sans-serif font family. */
-  --pgn-typography-font-family-sans-serif-tertiary: 'Segoe UI'; /* Sans-serif font family. */
-  --pgn-typography-font-family-sans-serif-secondary: BlinkMacSystemFont; /* Sans-serif font family. */
-  --pgn-typography-font-family-sans-serif-primary: -apple-system; /* Sans-serif font family. */
-  --pgn-typography-font-family-base-fallback: sans-serif; /* Basic font family. */
-  --pgn-typography-font-family-base-alternate-4: 'Noto Sans'; /* Basic font family. */
-  --pgn-typography-font-family-base-alternate-3: Arial; /* Basic font family. */
-  --pgn-typography-font-family-base-alternate-2: 'Helvetica Neue'; /* Basic font family. */
-  --pgn-typography-font-family-base-alternate-1: Roboto; /* Basic font family. */
-  --pgn-typography-font-family-base-tertiary: 'Segoe UI'; /* Basic font family. */
-  --pgn-typography-font-family-base-secondary: BlinkMacSystemFont; /* Basic font family. */
-  --pgn-typography-font-family-base-primary: -apple-system; /* Basic font family. */
+  --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* Sans-serif font family. */
+  --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); /* Basic font family. */
   --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25);
   --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-sm);
   --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold);
@@ -387,7 +366,7 @@
   --pgn-spacing-dropzone-padding: 1.5rem;
   --pgn-spacing-dropdown-close-container-top: 0.625rem;
   --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2);
-  --pgn-spacing-dropdown-padding-header-y: var(--pgn-spacing-dropdown-padding-y-base);
+  --pgn-spacing-dropdown-padding-header-y: 0.5rem;
   --pgn-spacing-dropdown-padding-header-x: var(--pgn-spacing-dropdown-padding-x-item);
   --pgn-spacing-dropdown-padding-y-item: 0.25rem;
   --pgn-spacing-dropdown-padding-y-base: 0.5rem;

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

diff --git a/tokens/src/core/components/Dropdown.json b/tokens/src/core/components/Dropdown.json
@@ -41,7 +41,7 @@
           "source": "$dropdown-header-padding",
           "$value": {
             "x": "{spacing.dropdown.padding.x.item}",
-            "y": "{spacing.dropdown.padding.y.base}"
+            "y": ".5rem"
           }
         }
       },

diff --git a/tokens/src/core/components/Form/transition.json b/tokens/src/core/components/Form/transition.json
@@ -10,14 +10,14 @@
             "duration": ".15s",
             "timing-function": "ease-in-out",
             "delay": "0s",
-            "behavior": "unset"
+            "behavior": "normal"
           },
           {
             "property": "box-shadow",
             "duration": ".15s",
             "timing-function": "ease-in-out",
             "delay": "0s",
-            "behavior": "unset"
+            "behavior": "normal"
           }
         ]
       },
@@ -29,21 +29,21 @@
             "duration": ".15s",
             "timing-function": "ease-in-out",
             "delay": "0s",
-            "behavior": "unset"
+            "behavior": "normal"
           },
           {
             "property": "border-color",
             "duration": ".15s",
             "timing-function": "ease-in-out",
             "delay": "0s",
-            "behavior": "unset"
+            "behavior": "normal"
           },
           {
             "property": "box-shadow",
             "duration": ".15s",
             "timing-function": "ease-in-out",
             "delay": "0s",
-            "behavior": "unset"
+            "behavior": "normal"
           }
         ]
       }

diff --git a/tokens/src/core/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json
@@ -46,7 +46,7 @@
           "duration": ".6s",
           "timing-function": "ease",
           "delay": "0s",
-          "behavior": "unset"
+          "behavior": "normal"
         }
       }
     }

diff --git a/tokens/src/core/global/transition.json b/tokens/src/core/global/transition.json
@@ -8,7 +8,7 @@
         "duration": ".2s",
         "timing-function": "ease-in-out",
         "delay": "0s",
-        "behavior": "unset"
+        "behavior": "normal"
       },
       "$description": "Generic transition for any property change"
     },
@@ -19,7 +19,7 @@
         "duration": ".15s",
         "timing-function": "linear",
         "delay": "0s",
-        "behavior": "unset"
+        "behavior": "normal"
       },
       "$description": "Opacity transition that takes 150ms"
     },
@@ -31,7 +31,7 @@
           "duration": ".35s",
           "timing-function": "ease",
           "delay": "0s",
-          "behavior": "unset"
+          "behavior": "normal"
         },
         "$description": "Collapse transition for height that takes 350ms"
       },
@@ -42,7 +42,7 @@
           "duration": ".35s",
           "timing-function": "ease",
           "delay": "0s",
-          "behavior": "unset"
+          "behavior": "normal"
         },
         "$description": "Collapse transition for width that takes 350ms"
       }

diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json
@@ -11,16 +11,8 @@
         "sans": {
           "serif": {
             "source": "$font-family-sans-serif",
-            "$value": {
-              "primary": "-apple-system",
-              "secondary": "BlinkMacSystemFont",
-              "tertiary": "'Segoe UI'",
-              "alternate-1": "Roboto",
-              "alternate-2": "'Helvetica Neue'",
-              "alternate-3": "Arial",
-              "alternate-4": "'Noto Sans'",
-              "fallback": "sans-serif"
-            },
+            "$value": ["-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial",
+            "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"],
             "$description": "Sans-serif font family."
           }
         },
@@ -31,15 +23,7 @@
         },
         "monospace": {
           "source": "$font-family-monospace",
-          "$value": {
-            "primary": "SFMono-Regular",
-            "secondary": "Menlo",
-            "tertiary": "Monaco",
-            "alternate-1": "Consolas",
-            "alternate-2": "Liberation Mono",
-            "legacy": "Courier New",
-            "fallback": "monospace"
-          },
+          "$value": ["SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',  'Courier New', monospace"],
           "$description": "Monospace font family."
         }
       },