Add module support

api3dao · Mar 26, 2024 · 3c459f5 · 3c459f5
1 parent a6f2b6a
commit 3c459f5
Show file tree

Hide file tree

Showing 16 changed files with 1,384 additions and 110 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -26,7 +26,7 @@ jobs:
         run: npm install
 
       - name: Run convertor
-        run: npm run convert-all
+        run: npm run build
 
       - name: Commit and push if changes
         run: |

diff --git a/config.js b/config.js
@@ -16,7 +16,7 @@ module.exports = {
       buildPath: "converted/js/",
       files: [
         {
-          destination: "tokens.js",
+          destination: "tokens.ts",
           format: "javascript/es6",
         },
       ],

diff --git a/converted/css/tokens.css b/converted/css/tokens.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 26 Mar 2024 12:16:47 GMT
+ * Generated on Tue, 26 Mar 2024 13:01:09 GMT
  */
 
 :root {
@@ -28,71 +28,71 @@
   --ds-core-color-emerald-700: #318570;
   --ds-core-color-emerald-800: #246354;
   --ds-core-color-emerald-900: #1a473c;
-  --ds-core-color-indigo-25: #E1E8FF;
-  --ds-core-color-indigo-50: #B7C7FF;
-  --ds-core-color-indigo-100: #87A1FF;
-  --ds-core-color-indigo-200: #6384FF;
+  --ds-core-color-indigo-25: #e1e8ff;
+  --ds-core-color-indigo-50: #b7c7ff;
+  --ds-core-color-indigo-100: #87a1ff;
+  --ds-core-color-indigo-200: #6384ff;
   --ds-core-color-indigo-300: #3e67ff;
   --ds-core-color-indigo-400: #194aff;
   --ds-core-color-indigo-500: #153dd1;
   --ds-core-color-indigo-600: #102fa3;
   --ds-core-color-indigo-700: #0c2275;
   --ds-core-color-indigo-800: #111b40;
   --ds-core-color-indigo-900: #131621;
-  --ds-core-color-purple-25: #F8F5FF;
-  --ds-core-color-purple-50: #E0D5FF;
-  --ds-core-color-purple-100: #C9B5FF;
-  --ds-core-color-purple-200: #B196FF;
-  --ds-core-color-purple-300: #9A76FF;
-  --ds-core-color-purple-400: #8256FF;
-  --ds-core-color-purple-500: #6B47D1;
-  --ds-core-color-purple-600: #5337A3;
-  --ds-core-color-purple-700: #3C2875;
+  --ds-core-color-purple-25: #f8f5ff;
+  --ds-core-color-purple-50: #e0d5ff;
+  --ds-core-color-purple-100: #c9b5ff;
+  --ds-core-color-purple-200: #b196ff;
+  --ds-core-color-purple-300: #9a76ff;
+  --ds-core-color-purple-400: #8256ff;
+  --ds-core-color-purple-500: #6b47d1;
+  --ds-core-color-purple-600: #5337a3;
+  --ds-core-color-purple-700: #3c2875;
   --ds-core-color-purple-800: #241847;
-  --ds-core-color-purple-900: #0D091A;
-  --ds-core-color-red-25: #FFEEE8;
-  --ds-core-color-red-50: #FFD3C6;
-  --ds-core-color-red-100: #FFB9A3;
+  --ds-core-color-purple-900: #0d091a;
+  --ds-core-color-red-25: #ffeee8;
+  --ds-core-color-red-50: #ffd3c6;
+  --ds-core-color-red-100: #ffb9a3;
   --ds-core-color-red-200: #ff9f81;
-  --ds-core-color-red-300: #FF855E;
-  --ds-core-color-red-400: #FF6A3C;
+  --ds-core-color-red-300: #ff855e;
+  --ds-core-color-red-400: #ff6a3c;
   --ds-core-color-red-500: #ff5019;
-  --ds-core-color-red-600: #D14215;
-  --ds-core-color-red-700: #A33310;
-  --ds-core-color-red-800: #75250C;
+  --ds-core-color-red-600: #d14215;
+  --ds-core-color-red-700: #a33310;
+  --ds-core-color-red-800: #75250c;
   --ds-core-color-red-900: #471607;
-  --ds-core-color-orange-25: #FFF7E8;
-  --ds-core-color-orange-50: #FFECC6;
-  --ds-core-color-orange-100: #FFE0A3;
-  --ds-core-color-orange-200: #FFD481;
-  --ds-core-color-orange-300: #FFC85E;
-  --ds-core-color-orange-400: #FFBD3C;
-  --ds-core-color-orange-500: #FFB119;
-  --ds-core-color-orange-600: #D19115;
-  --ds-core-color-orange-700: #A37110;
-  --ds-core-color-orange-800: #75510C;
+  --ds-core-color-orange-25: #fff7e8;
+  --ds-core-color-orange-50: #ffecc6;
+  --ds-core-color-orange-100: #ffe0a3;
+  --ds-core-color-orange-200: #ffd481;
+  --ds-core-color-orange-300: #ffc85e;
+  --ds-core-color-orange-400: #ffbd3c;
+  --ds-core-color-orange-500: #ffb119;
+  --ds-core-color-orange-600: #d19115;
+  --ds-core-color-orange-700: #a37110;
+  --ds-core-color-orange-800: #75510c;
   --ds-core-color-orange-900: #473207;
-  --ds-core-color-green-25: #E8F8EF;
-  --ds-core-color-green-50: #C6EED8;
-  --ds-core-color-green-100: #A3E3C1;
-  --ds-core-color-green-200: #81D9A9;
-  --ds-core-color-green-300: #5ECF92;
-  --ds-core-color-green-400: #3CC47A;
-  --ds-core-color-green-500: #19BA63;
+  --ds-core-color-green-25: #e8f8ef;
+  --ds-core-color-green-50: #c6eed8;
+  --ds-core-color-green-100: #a3e3c1;
+  --ds-core-color-green-200: #81d9a9;
+  --ds-core-color-green-300: #5ecf92;
+  --ds-core-color-green-400: #3cc47a;
+  --ds-core-color-green-500: #19ba63;
   --ds-core-color-green-600: #159951;
-  --ds-core-color-green-700: #10773F;
-  --ds-core-color-green-800: #0C562E;
-  --ds-core-color-green-900: #07341C;
-  --ds-core-color-blue-25: #E8F4FF;
-  --ds-core-color-blue-50: #C6E4FF;
-  --ds-core-color-blue-100: #A4D3FF;
-  --ds-core-color-blue-200: #82C3FF;
-  --ds-core-color-blue-300: #60B3FF;
-  --ds-core-color-blue-400: #3EA2FF;
-  --ds-core-color-blue-500: #1C92FF;
-  --ds-core-color-blue-600: #1778D1;
-  --ds-core-color-blue-700: #125DA3;
-  --ds-core-color-blue-800: #0D4375;
+  --ds-core-color-green-700: #10773f;
+  --ds-core-color-green-800: #0c562e;
+  --ds-core-color-green-900: #07341c;
+  --ds-core-color-blue-25: #e8f4ff;
+  --ds-core-color-blue-50: #c6e4ff;
+  --ds-core-color-blue-100: #a4d3ff;
+  --ds-core-color-blue-200: #82c3ff;
+  --ds-core-color-blue-300: #60b3ff;
+  --ds-core-color-blue-400: #3ea2ff;
+  --ds-core-color-blue-500: #1c92ff;
+  --ds-core-color-blue-600: #1778d1;
+  --ds-core-color-blue-700: #125da3;
+  --ds-core-color-blue-800: #0d4375;
   --ds-core-color-blue-900: #082947;
   --ds-core-font-family-default: Inter;
   --ds-core-font-weight-300: Light;
@@ -465,65 +465,65 @@
   --ds-semantic-input-border-focused-color: #f3f3f3;
   --ds-semantic-input-border-focused-width: 1px;
   --ds-semantic-input-border-focused-style: solid;
-  --ds-semantic-input-border-error-focused-color: #FF855E;
+  --ds-semantic-input-border-error-focused-color: #ff855e;
   --ds-semantic-input-border-error-focused-width: 1px;
   --ds-semantic-input-border-error-focused-style: solid;
-  --ds-semantic-input-border-error-default-color: #A33310;
+  --ds-semantic-input-border-error-default-color: #a33310;
   --ds-semantic-input-border-error-default-width: 1px;
   --ds-semantic-input-border-error-default-style: solid;
-  --ds-semantic-color-action-error-25: #FFEEE8;
-  --ds-semantic-color-action-error-50: #FFD3C6;
-  --ds-semantic-color-action-error-100: #FFB9A3;
+  --ds-semantic-color-action-error-25: #ffeee8;
+  --ds-semantic-color-action-error-50: #ffd3c6;
+  --ds-semantic-color-action-error-100: #ffb9a3;
   --ds-semantic-color-action-error-200: #ff9f81;
-  --ds-semantic-color-action-error-300: #FF855E;
-  --ds-semantic-color-action-error-400: #FF6A3C;
+  --ds-semantic-color-action-error-300: #ff855e;
+  --ds-semantic-color-action-error-400: #ff6a3c;
   --ds-semantic-color-action-error-500: #ff5019;
-  --ds-semantic-color-action-error-600: #D14215;
-  --ds-semantic-color-action-error-700: #A33310;
-  --ds-semantic-color-action-error-800: #75250C;
+  --ds-semantic-color-action-error-600: #d14215;
+  --ds-semantic-color-action-error-700: #a33310;
+  --ds-semantic-color-action-error-800: #75250c;
   --ds-semantic-color-action-error-900: #471607;
-  --ds-semantic-color-action-success-25: #E8F8EF;
-  --ds-semantic-color-action-success-50: #C6EED8;
-  --ds-semantic-color-action-success-100: #A3E3C1;
-  --ds-semantic-color-action-success-200: #81D9A9;
-  --ds-semantic-color-action-success-300: #5ECF92;
-  --ds-semantic-color-action-success-400: #3CC47A;
-  --ds-semantic-color-action-success-500: #19BA63;
+  --ds-semantic-color-action-success-25: #e8f8ef;
+  --ds-semantic-color-action-success-50: #c6eed8;
+  --ds-semantic-color-action-success-100: #a3e3c1;
+  --ds-semantic-color-action-success-200: #81d9a9;
+  --ds-semantic-color-action-success-300: #5ecf92;
+  --ds-semantic-color-action-success-400: #3cc47a;
+  --ds-semantic-color-action-success-500: #19ba63;
   --ds-semantic-color-action-success-600: #159951;
-  --ds-semantic-color-action-success-700: #10773F;
-  --ds-semantic-color-action-success-800: #0C562E;
-  --ds-semantic-color-action-success-900: #07341C;
-  --ds-semantic-color-action-warning-25: #FFF7E8;
-  --ds-semantic-color-action-warning-50: #FFECC6;
-  --ds-semantic-color-action-warning-100: #FFE0A3;
-  --ds-semantic-color-action-warning-200: #FFD481;
-  --ds-semantic-color-action-warning-300: #FFC85E;
-  --ds-semantic-color-action-warning-400: #FFBD3C;
-  --ds-semantic-color-action-warning-500: #FFB119;
-  --ds-semantic-color-action-warning-600: #D19115;
-  --ds-semantic-color-action-warning-700: #A37110;
-  --ds-semantic-color-action-warning-800: #75510C;
+  --ds-semantic-color-action-success-700: #10773f;
+  --ds-semantic-color-action-success-800: #0c562e;
+  --ds-semantic-color-action-success-900: #07341c;
+  --ds-semantic-color-action-warning-25: #fff7e8;
+  --ds-semantic-color-action-warning-50: #ffecc6;
+  --ds-semantic-color-action-warning-100: #ffe0a3;
+  --ds-semantic-color-action-warning-200: #ffd481;
+  --ds-semantic-color-action-warning-300: #ffc85e;
+  --ds-semantic-color-action-warning-400: #ffbd3c;
+  --ds-semantic-color-action-warning-500: #ffb119;
+  --ds-semantic-color-action-warning-600: #d19115;
+  --ds-semantic-color-action-warning-700: #a37110;
+  --ds-semantic-color-action-warning-800: #75510c;
   --ds-semantic-color-action-warning-900: #473207;
-  --ds-semantic-color-action-info-25: #E8F4FF;
-  --ds-semantic-color-action-info-50: #C6E4FF;
-  --ds-semantic-color-action-info-100: #A4D3FF;
-  --ds-semantic-color-action-info-200: #82C3FF;
-  --ds-semantic-color-action-info-300: #60B3FF;
-  --ds-semantic-color-action-info-400: #3EA2FF;
-  --ds-semantic-color-action-info-500: #1C92FF;
-  --ds-semantic-color-action-info-600: #1778D1;
-  --ds-semantic-color-action-info-700: #125DA3;
-  --ds-semantic-color-action-info-800: #0D4375;
+  --ds-semantic-color-action-info-25: #e8f4ff;
+  --ds-semantic-color-action-info-50: #c6e4ff;
+  --ds-semantic-color-action-info-100: #a4d3ff;
+  --ds-semantic-color-action-info-200: #82c3ff;
+  --ds-semantic-color-action-info-300: #60b3ff;
+  --ds-semantic-color-action-info-400: #3ea2ff;
+  --ds-semantic-color-action-info-500: #1c92ff;
+  --ds-semantic-color-action-info-600: #1778d1;
+  --ds-semantic-color-action-info-700: #125da3;
+  --ds-semantic-color-action-info-800: #0d4375;
   --ds-semantic-color-action-info-900: #082947;
   --ds-semantic-color-text-default: #878888;
   --ds-semantic-color-text-error: #ff5019;
-  --ds-semantic-color-text-warning: #FFB119;
-  --ds-semantic-color-text-success: #19BA63;
+  --ds-semantic-color-text-warning: #ffb119;
+  --ds-semantic-color-text-success: #19ba63;
   --ds-semantic-color-border-default: #404141;
   --ds-semantic-color-border-focused: #f3f3f3;
   --ds-semantic-color-border-disabled: #222222;
-  --ds-semantic-color-border-error-default: #A33310;
-  --ds-semantic-color-border-error-focused: #FF855E;
+  --ds-semantic-color-border-error-default: #a33310;
+  --ds-semantic-color-border-error-focused: #ff855e;
   --ds-semantic-color-background-default: #030303;
   --ds-semantic-color-background-focused: #121313;
   --ds-semantic-search-border-disabled-color: #222222;
@@ -535,10 +535,10 @@
   --ds-semantic-search-border-focused-color: #f3f3f3;
   --ds-semantic-search-border-focused-width: 1px;
   --ds-semantic-search-border-focused-style: solid;
-  --ds-semantic-search-border-error-focused-color: #FF855E;
+  --ds-semantic-search-border-error-focused-color: #ff855e;
   --ds-semantic-search-border-error-focused-width: 1px;
   --ds-semantic-search-border-error-focused-style: solid;
-  --ds-semantic-search-border-error-neutral-color: #A33310;
+  --ds-semantic-search-border-error-neutral-color: #a33310;
   --ds-semantic-search-border-error-neutral-width: 1px;
   --ds-semantic-search-border-error-neutral-style: solid;
   --ds-component-button-primary-default: [object Object];

diff --git a/converted/js/tailwind.config.js → converted/js/tailwind.config.ts b/converted/js/tailwind.config.js → converted/js/tailwind.config.ts
diff --git a/converted/js/tokens.js → converted/js/tokens.ts b/converted/js/tokens.js → converted/js/tokens.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 26 Mar 2024 12:16:47 GMT
+ * Generated on Tue, 26 Mar 2024 13:01:09 GMT
  */
 
 export const DsCoreColorBaseLight = "#f3f3f3";
@@ -149,7 +149,14 @@ export const DsCoreBreakpointsS = "600px";
 export const DsCoreBreakpointsM = "1024px";
 export const DsCoreBreakpointsL = "1300px";
 export const DsCoreBreakpointsXl = "1600px";
-export const DsSemanticShadowDropdown = {"x":"0px","y":"4px","blur":"20px","spread":"0px","color":"#10121190","type":"dropShadow"};
+export const DsSemanticShadowDropdown = {
+  x: "0px",
+  y: "4px",
+  blur: "20px",
+  spread: "0px",
+  color: "#10121190",
+  type: "dropShadow",
+};
 export const DsSemanticFontHeading1FontFamily = "Inter";
 export const DsSemanticFontHeading1FontWeight = "SemiBold";
 export const DsSemanticFontHeading1LineHeight = "110%";
@@ -540,5 +547,27 @@ export const DsSemanticSearchBorderErrorFocusedStyle = "solid";
 export const DsSemanticSearchBorderErrorNeutralColor = "#A33310";
 export const DsSemanticSearchBorderErrorNeutralWidth = "1px";
 export const DsSemanticSearchBorderErrorNeutralStyle = "solid";
-export const DsComponentButtonPrimaryDefault = {"fill":"#C6E4FF","borderRadius":8,"typography":{"fontFamily":"Inter","fontWeight":"SemiBold","lineHeight":"100%","fontSize":18,"letterSpacing":"0.3px"}};
-export const DsComponentInputDefault = {"border":{"color":"#404141","width":"1px","style":"solid"},"typography":{"fontFamily":"Inter","fontWeight":"Regular","lineHeight":"140%","fontSize":14,"letterSpacing":"0px"},"fill":"#030303","verticalPadding":8,"horizontalPadding":12};
+export const DsComponentButtonPrimaryDefault = {
+  fill: "#C6E4FF",
+  borderRadius: 8,
+  typography: {
+    fontFamily: "Inter",
+    fontWeight: "SemiBold",
+    lineHeight: "100%",
+    fontSize: 18,
+    letterSpacing: "0.3px",
+  },
+};
+export const DsComponentInputDefault = {
+  border: { color: "#404141", width: "1px", style: "solid" },
+  typography: {
+    fontFamily: "Inter",
+    fontWeight: "Regular",
+    lineHeight: "140%",
+    fontSize: 14,
+    letterSpacing: "0px",
+  },
+  fill: "#030303",
+  verticalPadding: 8,
+  horizontalPadding: 12,
+};