fix(preset-theme-default): allow overriding config like body color

jd-solanki · jd-solanki · commit a0c3ad17e693 · 2023-04-18T15:18:13.000+05:30
diff --git a/packages/anu-vue/src/plugin.ts b/packages/anu-vue/src/plugin.ts
@@ -36,6 +36,7 @@ const configDefaults: PluginOptions = {
         danger: '358.3, 100%, 64.9%',
       },
       cssVars: {
+        'body-color': 'hsla(var(--a-base-c), 0.68)',
         'body-bg-c': '0,4.8%,95.9%',
 
         // ℹ️ Used for background on body like select options, card, etc
@@ -52,6 +53,7 @@ const configDefaults: PluginOptions = {
         danger: '358.3, 73%, 64.9%',
       },
       cssVars: {
+        'body-color': 'hsla(var(--a-base-c), 0.68)',
         'body-bg-c': 'var(--a-primary-hue), 15%, 5%',
         'surface-c': 'var(--a-primary-hue), 7%, 10%',
       },
diff --git a/packages/preset-theme-default/build.config.ts b/packages/preset-theme-default/build.config.ts
@@ -17,7 +17,8 @@ export default defineBuildConfig({
   ],
   hooks: {
     'mkdist:done': () => {
-      fs.copyFileSync('src/scss/index.scss', 'dist/style.scss')
+      // ℹ️ We no longer need to ship SCSS file
+      // fs.copyFileSync('src/scss/index.scss', 'dist/style.scss')
 
       const compiledSass = sass.compile('./src/scss/index.scss', { style: 'compressed', loadPaths: ['./node_modules/'] })
 
diff --git a/packages/preset-theme-default/src/scss/index.scss b/packages/preset-theme-default/src/scss/index.scss
@@ -6,10 +6,6 @@ body {
   text-rendering: optimizeSpeed;
 }
 
-$body-color: hsla(var(--a-base-c), 0.68);
-$body-font-family: 'Inter', sans-serif;
-$header-font-family: $body-font-family;
-
 :root {
     // #region all-css-vars
     --a-base-c: var(--a-primary-hue), 10%, 20%;
@@ -88,12 +84,10 @@ $header-font-family: $body-font-family;
 
 body {
   background-color: hsl(var(--a-body-bg-c));
-  color: $body-color;
+  color: var(--a-body-color);
 
   // Disable mobile tap blue color
   -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
-
-  font-family: $body-font-family;
 }
 
 h1,
@@ -103,7 +97,6 @@ h4,
 h5,
 h6 {
   color: hsla(var(--a-base-c), 0.87);
-  font-family: $header-font-family;
 }
 
 // 👉 Misc
@@ -145,6 +138,6 @@ textarea:-webkit-autofill:focus,
 select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
-  -webkit-text-fill-color: $body-color;
+  -webkit-text-fill-color: var(--a-body-color);
   transition: background-color 5000s ease-in-out 0s;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
