fix: use css vars for icons

appwrite · Aug 17, 2023 · 63690d2 · 63690d2
1 parent 3324b9c
commit 63690d2
Show file tree

Hide file tree

Showing 9 changed files with 485 additions and 21 deletions.
diff --git a/apps/pink/public/search.json b/apps/pink/public/search.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,8 +33,5 @@
     "npm": ">=7.0.0",
     "node": ">=16.0.0"
   },
-  "packageManager": "npm@8.1.2",
-  "dependencies": {
-    "@appwrite.io/pink-icons": "^0.0.7-next.1"
-  }
+  "packageManager": "npm@8.1.2"
 }
diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -13,7 +13,7 @@
   "license": "ISC",
   "devDependencies": {
     "oslllo-svg-fixer": "^2.2.0",
-    "svgtofont": "^3.22.0"
+    "svgtofont": "^4.0.0"
   },
   "main": "dist/icon.css",
   "style": "dist/icon.css",

diff --git a/packages/icons/scripts.js b/packages/icons/scripts.js
@@ -26,7 +26,8 @@ export const generateIcons = async () => {
         generateInfoData: true,
         svgoOptions: {
             full: false
-        }
+        },
+        useCSSVars: true
     });
 }
 

diff --git a/packages/icons/templates/__variables.scss.template b/packages/icons/templates/__variables.scss.template
diff --git a/packages/icons/templates/_{{filename}}.css.template b/packages/icons/templates/_{{filename}}.css.template
@@ -10,8 +10,7 @@
 }
 
 [class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
-    font-family: '{{fontname}}' !important;
-    font-size: {{fontSize}};
+    font-family: '{{fontname}}' !important;{{fontSize}}
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

diff --git a/packages/icons/templates/_{{filename}}.scss.template b/packages/icons/templates/_{{filename}}.scss.template
@@ -8,8 +8,7 @@
 }
 
 [class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
-  font-family: '{{fontname}}' !important;
-  font-size: {{fontSize}};
+  font-family: '{{fontname}}' !important;{{fontSize}}
   font-display: swap;
   font-style: normal;
   -webkit-font-smoothing: antialiased;

diff --git a/packages/ui/src/6-elements/form/_radio-and-checkbox.scss b/packages/ui/src/6-elements/form/_radio-and-checkbox.scss
@@ -1,5 +1,4 @@
 @use '../../abstract' as *;
-@use '@appwrite.io/pink-icons/dist/variables' as icons;
 
 [type="checkbox"],
 [type="radio"] {
@@ -127,7 +126,7 @@
   &:where(:checked) {
     &::before {
       font-family: 'icon' !important;
-      content: icons.$icon-check;
+      content: var(--icon-check);
       vertical-align: middle;
       margin-bottom:  calc(var(--p-size) / 8 * -1);
       font-size:      var(--p-icon-size);