@agorapulse/ui-theme 15.0.13 → 15.0.14

package/assets/{variables.css → desktop_variables.css}

@@ -1,29 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:19:19 GMT
+ * Generated on Wed, 21 Jun 2023 16:39:54 GMT
  */
 
 :root {
-  --comp-button-text-size: 14px;
-  --comp-button-text-font-family: Averta;
-  --comp-button-text-weight: 700;
-  --comp-button-text-line-height: 20px;
-  --comp-button-padding-horizontal: 8px;
-  --comp-button-padding-vertical: 16px;
-  --comp-button-border-radius: 4px;
-  --comp-button-spacing: 8px;
-  --comp-icon-button-width: 36px;
-  --comp-icon-button-height: 36px;
-  --comp-icon-button-padding: 10px;
-  --comp-icon-button-border-radius: 8px;
-  --comp-split-button-text-size: 14px;
-  --comp-split-button-text-font-family: Averta;
-  --comp-split-button-text-weight: 700;
-  --comp-split-button-text-line-height: 20px;
-  --comp-split-button-padding-horizontal: 8px;
-  --comp-split-button-padding-vertical: 16px;
-  --comp-split-button-border-radius: 4px;
-  --comp-split-button-spacing: 8px;
   --ref-border-radius-sm: 4px;
   --ref-border-radius-md: 6px;
   --ref-border-radius-lg: 8px;
@@ -249,4 +229,29 @@
   --sys-text-style-caption-bold-size: 12px;
   --sys-text-style-caption-bold-weight: 700;
   --sys-text-style-caption-bold-line-height: 16px;
+  --sys-button-height: 36px;
+  --sys-icon-button-padding: 10px;
+  --sys-icon-button-width: 36px;
+  --sys-icon-button-height: 36px;
+  --comp-button-text-size: 14px;
+  --comp-button-text-font-family: Averta;
+  --comp-button-text-weight: 700;
+  --comp-button-text-line-height: 20px;
+  --comp-button-padding-horizontal: 8px;
+  --comp-button-padding-vertical: 16px;
+  --comp-button-height: 36px;
+  --comp-button-border-radius: 4px;
+  --comp-button-spacing: 8px;
+  --comp-icon-button-padding: 10px;
+  --comp-icon-button-width: 36px;
+  --comp-icon-button-height: 36px;
+  --comp-icon-button-border-radius: 8px;
+  --comp-split-button-text-size: 14px;
+  --comp-split-button-text-font-family: Averta;
+  --comp-split-button-text-weight: 700;
+  --comp-split-button-text-line-height: 20px;
+  --comp-split-button-padding-horizontal: 8px;
+  --comp-split-button-padding-vertical: 16px;
+  --comp-split-button-border-radius: 4px;
+  --comp-split-button-spacing: 8px;
 }

package/assets/mobile_variables.css

@@ -0,0 +1,257 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 21 Jun 2023 16:39:54 GMT
+ */
+
+:root {
+  --ref-border-radius-sm: 4px;
+  --ref-border-radius-md: 6px;
+  --ref-border-radius-lg: 8px;
+  --ref-color-white: #FFFFFF;
+  --ref-color-background: #F9F9FA;
+  --ref-color-orange-10: #FFEFE9;
+  --ref-color-orange-20: #FFE1D4;
+  --ref-color-orange-40: #FFC2A8;
+  --ref-color-orange-60: #FFA47D;
+  --ref-color-orange-80: #FF7E46;
+  --ref-color-orange-100: #FF6726;
+  --ref-color-orange-150: #C83E07;
+  --ref-color-electric-blue-10: #E8F4FF;
+  --ref-color-electric-blue-20: #D1E8FF;
+  --ref-color-electric-blue-40: #A2D1FF;
+  --ref-color-electric-blue-60: #74BBFE;
+  --ref-color-electric-blue-80: #3A9EFE;
+  --ref-color-electric-blue-100: #178DFE;
+  --ref-color-electric-blue-150: #0E72D6;
+  --ref-color-electric-blue-05: #F3F9FF;
+  --ref-color-soft-blue-10: #EFF5FC;
+  --ref-color-soft-blue-20: #DFEDFA;
+  --ref-color-soft-blue-40: #C0DBF4;
+  --ref-color-soft-blue-60: #A0C8EF;
+  --ref-color-soft-blue-80: #78B1E8;
+  --ref-color-soft-blue-100: #2873BA;
+  --ref-color-soft-blue-150: #2873BA;
+  --ref-color-grey-10: #EAECEF;
+  --ref-color-grey-20: #D6DAE0;
+  --ref-color-grey-40: #AEB5C1;
+  --ref-color-grey-60: #858FA1;
+  --ref-color-grey-80: #5D6A82;
+  --ref-color-grey-100: #344563;
+  --ref-color-grey-150: #212E44;
+  --ref-color-grey-05: #F5F5F7;
+  --ref-color-grey-bg: #F9F9FA;
+  --ref-color-green-10: #ECF7ED;
+  --ref-color-green-20: #DAF1DD;
+  --ref-color-green-40: #B5E3BB;
+  --ref-color-green-60: #8FD498;
+  --ref-color-green-80: #61C26D;
+  --ref-color-green-100: #45B854;
+  --ref-color-green-150: #0F821D;
+  --ref-color-tag-orange-10: #FFF8E6;
+  --ref-color-tag-orange-20: #FEF0CC;
+  --ref-color-tag-orange-40: #FDE199;
+  --ref-color-tag-orange-60: #FDD366;
+  --ref-color-tag-orange-80: #FCC026;
+  --ref-color-tag-orange-100: #FBB500;
+  --ref-color-tag-orange-150: #A66200;
+  --ref-color-yellow-10: #FFFDE9;
+  --ref-color-yellow-20: #FFFBD2;
+  --ref-color-yellow-40: #FFF6A5;
+  --ref-color-yellow-60: #FFF279;
+  --ref-color-yellow-80: #FFEC41;
+  --ref-color-yellow-100: #FFE91F;
+  --ref-color-yellow-150: #A56608;
+  --ref-color-red-10: #FDE7E7;
+  --ref-color-red-20: #FAD0D0;
+  --ref-color-red-40: #F6A1A1;
+  --ref-color-red-60: #F17171;
+  --ref-color-red-80: #EB3636;
+  --ref-color-red-100: #E81313;
+  --ref-color-red-150: #D80505;
+  --ref-color-purple-10: #EFEDF8;
+  --ref-color-purple-20: #E0DDF2;
+  --ref-color-purple-40: #C1BBE6;
+  --ref-color-purple-60: #A398D9;
+  --ref-color-purple-80: #7C6DC9;
+  --ref-color-purple-100: #6554C0;
+  --ref-color-purple-150: #3C2C95;
+  --ref-color-purple-05: #F6F8FF;
+  --ref-color-menthol-10: #F1F9F8;
+  --ref-color-menthol-20: #CFECEA;
+  --ref-color-menthol-40: #9FD9D6;
+  --ref-color-menthol-60: #64C8BC;
+  --ref-color-menthol-80: #1DBEB0;
+  --ref-color-menthol-100: #0FA09B;
+  --ref-color-menthol-150: #057E7A;
+  --ref-color-facebook-10: #e7f1fd;
+  --ref-color-facebook-100: #1877F2;
+  --ref-color-instagram-10: #fbe9f1;
+  --ref-color-instagram-100: #DD2A7B;
+  --ref-color-twitter-10: #e8f5fd;
+  --ref-color-twitter-100: #1DA1F2;
+  --ref-color-linkedin-10: #e6eff9;
+  --ref-color-linkedin-100: #2668B2;
+  --ref-color-youtube-10: #fee5e5;
+  --ref-color-youtube-100: #FE0101;
+  --ref-color-tiktok-default-10: #e5e5e5;
+  --ref-color-tiktok-default-100: #000000;
+  --ref-color-tiktok-blue-10: #e9fdfd;
+  --ref-color-tiktok-blue-100: #25F4EE;
+  --ref-color-tiktok-red-10: #fee9ee;
+  --ref-color-tiktok-red-100: #FE2C55;
+  --ref-font-size-xs: 12px;
+  --ref-font-size-sm: 14px;
+  --ref-font-size-md: 16px;
+  --ref-font-size-lg: 18px;
+  --ref-font-size-xl: 20px;
+  --ref-font-size-xxl: 24px;
+  --ref-font-size-xxxl: 28px;
+  --ref-font-weight-regular: 400;
+  --ref-font-weight-bold: 700;
+  --ref-font-weight-extra-bold: 800;
+  --ref-font-weight-black: 900;
+  --ref-font-line-height-xxs: 14px;
+  --ref-font-line-height-xs: 16px;
+  --ref-font-line-height-sm: 18px;
+  --ref-font-line-height-md: 20px;
+  --ref-font-line-height-lg: 24px;
+  --ref-font-line-height-xl: 32px;
+  --ref-font-line-height-xxl: 36px;
+  --ref-spacing-xxxs: 4px;
+  --ref-spacing-xxs: 8px;
+  --ref-spacing-xs: 12px;
+  --ref-spacing-sm: 16px;
+  --ref-spacing-md: 24px;
+  --ref-spacing-lg: 32px;
+  --ref-spacing-xl: 40px;
+  --ref-spacing-xxl: 48px;
+  --ref-spacing-xxxl: 60px;
+  --sys-border-color-default: #EAECEF;
+  --sys-border-color-active: #178DFE;
+  --sys-border-color-error: #E81313;
+  --sys-border-radius-sm: 4px;
+  --sys-border-radius-md: 4px;
+  --sys-border-radius-lg: 8px;
+  --sys-color-main-default-bg: #FF6726;
+  --sys-color-main-default-bg-hover: #FF7E46;
+  --sys-color-main-default-bg-clicked: #FFA47D;
+  --sys-color-main-default-bg-disabled: #FFE1D4;
+  --sys-color-main-default-text: #FFFFFF;
+  --sys-color-main-light-bg: #FFEFE9;
+  --sys-color-main-light-text: #C83E07;
+  --sys-color-main-text: #FF6726;
+  --sys-color-accent-default-bg: #178DFE;
+  --sys-color-accent-default-bg-hover: #3A9EFE;
+  --sys-color-accent-default-bg-clicked: #74BBFE;
+  --sys-color-accent-default-bg-disabled: #D1E8FF;
+  --sys-color-accent-default-text: #FFFFFF;
+  --sys-color-accent-light-bg: #F3F9FF;
+  --sys-color-accent-light-text: #0E72D6;
+  --sys-color-accent-text: #178DFE;
+  --sys-color-error-default-bg: #E81313;
+  --sys-color-error-default-bg-hover: #EB3636;
+  --sys-color-error-default-bg-clicked: #F17171;
+  --sys-color-error-default-bg-disabled: #FAD0D0;
+  --sys-color-error-default-text: #FFFFFF;
+  --sys-color-error-light-bg: #FDE7E7;
+  --sys-color-error-light-text: #D80505;
+  --sys-color-error-text: #E81313;
+  --sys-color-warning-default-bg: #FFE91F;
+  --sys-color-warning-default-bg-hover: #FFEC41;
+  --sys-color-warning-default-bg-clicked: #FFF279;
+  --sys-color-warning-default-bg-disabled: #FFFBD2;
+  --sys-color-warning-default-text: #FFFFFF;
+  --sys-color-warning-light-bg: #FFFDE9;
+  --sys-color-warning-light-text: #A56608;
+  --sys-color-warning-text: #FFE91F;
+  --sys-color-success-default-bg: #45B854;
+  --sys-color-success-default-bg-hover: #61C26D;
+  --sys-color-success-default-bg-clicked: #8FD498;
+  --sys-color-success-default-bg-disabled: #DAF1DD;
+  --sys-color-success-default-text: #FFFFFF;
+  --sys-color-success-light-bg: #ECF7ED;
+  --sys-color-success-light-text: #0F821D;
+  --sys-color-success-text: #45B854;
+  --sys-color-feature-lock-default-bg: #6554C0;
+  --sys-color-feature-lock-default-bg-hover: #7C6DC9;
+  --sys-color-feature-lock-default-bg-clicked: #A398D9;
+  --sys-color-feature-lock-default-bg-disabled: #E0DDF2;
+  --sys-color-feature-lock-default-text: #FFFFFF;
+  --sys-color-feature-lock-light-bg: #EFEDF8;
+  --sys-color-feature-lock-light-text: #3C2C95;
+  --sys-color-feature-lock-text: #6554C0;
+  --sys-icon-sm: 14px;
+  --sys-icon-md: 16px;
+  --sys-text-color-default: #344563;
+  --sys-text-color-light: #5D6A82;
+  --sys-text-color-error: #E81313;
+  --sys-text-style-h0-font-family: Averta;
+  --sys-text-style-h0-size: 20px;
+  --sys-text-style-h0-weight: 900;
+  --sys-text-style-h0-line-height: 36px;
+  --sys-text-style-marketing-font-family: Averta;
+  --sys-text-style-marketing-size: 24px;
+  --sys-text-style-marketing-weight: 800;
+  --sys-text-style-marketing-line-height: 36px;
+  --sys-text-style-h1-font-family: Averta;
+  --sys-text-style-h1-size: 20px;
+  --sys-text-style-h1-weight: 700;
+  --sys-text-style-h1-line-height: 36px;
+  --sys-text-style-h2-font-family: Averta;
+  --sys-text-style-h2-size: 18px;
+  --sys-text-style-h2-weight: 700;
+  --sys-text-style-h2-line-height: 24px;
+  --sys-text-style-subtitle-font-family: Averta;
+  --sys-text-style-subtitle-size: 16px;
+  --sys-text-style-subtitle-weight: 400;
+  --sys-text-style-subtitle-line-height: 20px;
+  --sys-text-style-h3-font-family: Averta;
+  --sys-text-style-h3-size: 16px;
+  --sys-text-style-h3-weight: 700;
+  --sys-text-style-h3-line-height: 24px;
+  --sys-text-style-h4-font-family: Averta;
+  --sys-text-style-h4-size: 14px;
+  --sys-text-style-h4-weight: 700;
+  --sys-text-style-h4-line-height: 20px;
+  --sys-text-style-body-font-family: Averta;
+  --sys-text-style-body-size: 14px;
+  --sys-text-style-body-weight: 400;
+  --sys-text-style-body-line-height: 18px;
+  --sys-text-style-body-bold-font-family: Averta;
+  --sys-text-style-body-bold-size: 14px;
+  --sys-text-style-body-bold-weight: 700;
+  --sys-text-style-body-bold-line-height: 18px;
+  --sys-text-style-caption-font-family: Averta;
+  --sys-text-style-caption-size: 12px;
+  --sys-text-style-caption-weight: 400;
+  --sys-text-style-caption-line-height: 16px;
+  --sys-text-style-caption-bold-font-family: Averta;
+  --sys-text-style-caption-bold-size: 12px;
+  --sys-text-style-caption-bold-weight: 700;
+  --sys-text-style-caption-bold-line-height: 16px;
+  --sys-button-height: 40px;
+  --sys-icon-button-padding: 8px;
+  --sys-icon-button-width: 36px;
+  --sys-icon-button-height: 36px;
+  --comp-button-text-size: 14px;
+  --comp-button-text-font-family: Averta;
+  --comp-button-text-weight: 700;
+  --comp-button-text-line-height: 20px;
+  --comp-button-padding-horizontal: 8px;
+  --comp-button-padding-vertical: 16px;
+  --comp-button-height: 40px;
+  --comp-button-border-radius: 4px;
+  --comp-button-spacing: 8px;
+  --comp-icon-button-padding: 8px;
+  --comp-icon-button-width: 36px;
+  --comp-icon-button-height: 36px;
+  --comp-icon-button-border-radius: 8px;
+  --comp-split-button-text-size: 14px;
+  --comp-split-button-text-font-family: Averta;
+  --comp-split-button-text-weight: 700;
+  --comp-split-button-text-line-height: 20px;
+  --comp-split-button-padding-horizontal: 8px;
+  --comp-split-button-padding-vertical: 16px;
+  --comp-split-button-border-radius: 4px;
+  --comp-split-button-spacing: 8px;
+}

package/assets/style/theme.scss

@@ -10,9 +10,6 @@
 @import 'colors';
 @import 'variables';
 
-// Design Tokens
-@import '../variables.css';
-
 // Custom palettes
 @include mat.all-legacy-component-themes(mat.define-light-theme(
     $primary: mat.define-palette($colors-primary),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agorapulse/ui-theme",
-  "version": "15.0.13",
+  "version": "15.0.14",
   "description": "Agorapulse UI Theme Library",
   "repository": {
     "type": "git",
@@ -12,7 +12,7 @@
     "url": "https://github.com/agorapulse/design/issues"
   },
   "scripts": {
-    "generate-tokens": "cd src && style-dictionary build && cd ../assets && git add variables.css"
+    "generate-tokens": "cd src && node build.js && cd ../assets && git add mobile_variables.css && git add desktop_variables.css"
   },
   "homepage": "https://github.com/agorapulse/design#readme",
   "peerDependencies": {

package/src/build.js

@@ -0,0 +1,6 @@
+const styleDictionary = require('style-dictionary');
+const mobileStyleDictionary = styleDictionary.extend('mobile_config.js');
+mobileStyleDictionary.buildAllPlatforms();
+
+const desktopStyleDictionary = styleDictionary.extend('desktop_config.js');
+desktopStyleDictionary.buildAllPlatforms();

package/src/desktop_config.js

@@ -0,0 +1,20 @@
+module.exports = {
+    source: [
+        'tokens/reference/*.json',
+        'tokens/system/*.json',
+        'tokens/system/desktop/*.json',
+        'tokens/components/*.json',
+    ],
+    platforms: {
+        desktop: {
+            transformGroup: 'css',
+            transforms: ['attribute/cti', 'name/cti/kebab', 'color/hex', 'size/px'],
+            files: [
+                {
+                    format: 'css/variables',
+                    destination: '../assets/desktop_variables.css',
+                },
+            ],
+        },
+    },
+};

package/src/mobile_config.js

@@ -0,0 +1,20 @@
+module.exports = {
+    source: [
+        'tokens/reference/*.json',
+        'tokens/system/*.json',
+        'tokens/system/mobile/*.json',
+        'tokens/components/*.json',
+    ],
+    platforms: {
+        mobile: {
+            transformGroup: 'css',
+            transforms: ['attribute/cti', 'name/cti/kebab', 'color/hex', 'size/px'],
+            files: [
+                {
+                    format: 'css/variables',
+                    destination: '../assets/mobile_variables.css',
+                },
+            ],
+        },
+    },
+};

package/src/tokens/components/button.json

@@ -23,6 +23,9 @@
                     "value": "{ref.spacing.sm}"
                 }
             },
+            "height": {
+                "value": "{sys.button.height}"
+            },
             "borderRadius": {
                 "value": "{sys.border.radius.md}"
             },

package/src/tokens/components/icon-button.json

@@ -1,14 +1,14 @@
 {
     "comp": {
         "iconButton": {
+            "padding": {
+                "value": "{sys.icon-button.padding}"
+            },
             "width": {
-                "value": "36px"
+                "value": "{sys.icon-button.width}"
             },
             "height": {
-                "value": "36px"
-            },
-            "padding": {
-                "value": "10px"
+                "value": "{sys.icon-button.height}"
             },
             "borderRadius": {
                 "value": "{sys.border.radius.lg}"

package/src/tokens/system/desktop/button.json

@@ -0,0 +1,9 @@
+{
+    "sys": {
+        "button": {
+            "height": {
+                "value": "36px"
+            }
+        }
+    }
+}

package/src/tokens/system/desktop/icon-button.json

@@ -0,0 +1,15 @@
+{
+    "sys": {
+        "icon-button": {
+            "padding": {
+                "value": "10px"
+            },
+            "width": {
+                "value": "36px"
+            },
+            "height": {
+                "value": "36px"
+            }
+        }
+    }
+}

package/src/tokens/system/mobile/button.json

@@ -0,0 +1,9 @@
+{
+    "sys": {
+        "button": {
+            "height": {
+                "value": "40px"
+            }
+        }
+    }
+}

package/src/tokens/system/mobile/icon-button.json

@@ -0,0 +1,15 @@
+{
+    "sys": {
+        "icon-button": {
+            "padding": {
+                "value": "8px"
+            },
+            "width": {
+                "value": "36px"
+            },
+            "height": {
+                "value": "36px"
+            }
+        }
+    }
+}

package/src/config.json

@@ -1,15 +0,0 @@
-{
-  "source": ["tokens/**/*.json"],
-  "platforms": {
-    "css": {
-      "transformGroup": "css",
-      "transforms": ["attribute/cti", "name/cti/kebab", "color/hex", "size/px"],
-      "files": [
-          {
-              "format": "css/variables",
-              "destination": "../assets/variables.css"
-          }
-      ]
-    }
-  }
-}