feat: converted utils and breakpoints

openedx · Nov 26, 2024 · 927ff3b · 927ff3b
1 parent cae4ee5
commit 927ff3b
Show file tree

Hide file tree

Showing 7 changed files with 1,521 additions and 1,537 deletions.
diff --git a/lib/build-tokens.js b/lib/build-tokens.js
@@ -33,9 +33,7 @@ async function buildTokensCommand(commandArgs) {
     'source-tokens-only': hasSourceTokensOnly,
     themes,
   } = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' });
-  // console.log('build-tokens.js - dirname =======>', dirname);
-  // console.log('build-tokens.js - StyleDictionary =======>', StyleDictionary);
-  // console.log('build-tokens.js - StyleDictionary =======>', StyleDictionary.hooks);
+
   const coreConfig = {
     include: [
       path.resolve(dirname, '../tokens/src/core/**/*.json'),
@@ -59,26 +57,23 @@ async function buildTokensCommand(commandArgs) {
               outputReferences: !hasSourceTokensOnly,
             },
           },
-          // {
-          //   format: 'css/custom-media-breakpoints',
-          //   destination: 'core/custom-media-breakpoints.css',
-          //   filter: hasSourceTokensOnly ? 'isSource' : undefined,
-          //   options: {
-          //     outputReferences: !hasSourceTokensOnly,
-          //   },
-          // },
+          {
+            format: 'css/custom-media-breakpoints',
+            destination: 'core/custom-media-breakpoints.css',
+            filter: hasSourceTokensOnly ? 'isSource' : undefined,
+            options: {
+              outputReferences: !hasSourceTokensOnly,
+            },
+          },
         ],
-        transforms: StyleDictionary.hooks.transformGroups.css.filter(item => {
-          // console.log('build-tokens.js - item =======>', item);
-          return item !== 'size/rem';
-        }).concat('color/sass-color-functions', 'str-replace'),
+        transforms: StyleDictionary.hooks.transformGroups.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'),
         options: {
           fileHeader: 'customFileHeader',
         },
       },
     },
   };
-  // console.log('build-tokens.js - coreConfig =======>', coreConfig);
+
   const getStyleDictionaryConfig = (themeVariant) => ({
     ...coreConfig,
     include: [
@@ -95,10 +90,7 @@ async function buildTokensCommand(commandArgs) {
     transform: {
       'color/sass-color-functions': {
         ...StyleDictionary.hooks.transforms['color/sass-color-functions'],
-        transform: (token) => {
-          // console.log('build-tokens.js - color/sass-color-functions =======>', token);
-          return colorTransform(token, themeVariant);
-        },
+        transform: (token) => colorTransform(token, themeVariant),
       },
     },
     format: {
@@ -119,14 +111,14 @@ async function buildTokensCommand(commandArgs) {
               outputReferences: !hasSourceTokensOnly,
             },
           },
-          // {
-          //   format: 'css/utility-classes',
-          //   destination: `themes/${themeVariant}/utility-classes.css`,
-          //   filter: hasSourceTokensOnly ? 'isSource' : undefined,
-          //   options: {
-          //     outputReferences: !hasSourceTokensOnly,
-          //   },
-          // },
+          {
+            format: 'css/utility-classes',
+            destination: `themes/${themeVariant}/utility-classes.css`,
+            filter: hasSourceTokensOnly ? 'isSource' : undefined,
+            options: {
+              outputReferences: !hasSourceTokensOnly,
+            },
+          },
         ],
       },
     },
@@ -137,7 +129,6 @@ async function buildTokensCommand(commandArgs) {
 
   themes.forEach(async (themeVariant) => {
     const config = getStyleDictionaryConfig(themeVariant);
-    // console.log('build-tokens.js - config =======>', config);
     new StyleDictionary(config).buildAllPlatforms();
     createIndexCssFile({ buildDir, isTheme: true, themeVariant });
   });

diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css
@@ -0,0 +1,11 @@
+[object Promise]@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0rem);
+@custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px);
+@custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px);
+@custom-media --pgn-size-breakpoint-max-width-sm (max-width: 768px);
+@custom-media --pgn-size-breakpoint-min-width-md (min-width: 768px);
+@custom-media --pgn-size-breakpoint-max-width-md (max-width: 992px);
+@custom-media --pgn-size-breakpoint-min-width-lg (min-width: 992px);
+@custom-media --pgn-size-breakpoint-max-width-lg (max-width: 1200px);
+@custom-media --pgn-size-breakpoint-min-width-xl (min-width: 1200px);
+@custom-media --pgn-size-breakpoint-max-width-xl (max-width: 1400px);
+@custom-media --pgn-size-breakpoint-min-width-xxl (min-width: 1400px);
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -1,4 +1,4 @@
-:root {
+[object Promise]:root {
   --pgn-theme-interval: 8%;
   --pgn-other-form-control-custom-file-content: Browse;
   --pgn-other-form-control-custom-file-lang: en;