Merge pull request #18 from dotellie/feat/opacity-from-theme

Opacity from theme and text opacity

Author: muhammadsammy

src/createFile.ts

@@ -2,7 +2,14 @@
 
 import fs from 'fs';
 import isEmpty from 'lodash.isempty';
-import { baseTemplateString, defaultColors, defaultScreens, defaultSpacing, generateTypes } from './utils';
+import {
+  baseTemplateString,
+  defaultColors,
+  defaultScreens,
+  defaultSpacing,
+  defaultOpacities,
+  generateTypes,
+} from './utils';
 
 interface IOptions {
   configFilename: string;
@@ -58,6 +65,16 @@ export function createFileWithGeneratedTypes({ configFilename, outputFilename }:
       }
     }
 
+    const themeOpacities = isEmpty(THEME_CONFIG?.opacity) ? defaultOpacities : THEME_CONFIG?.opacity;
+    const extendedThemeOpacities = THEME_CONFIG?.extend?.opacity;
+    const allOpacities = extendedThemeOpacities ? { ...themeOpacities, ...extendedThemeOpacities } : themeOpacities;
+    const opacities = Object.keys(allOpacities).map(opacity => `${prefix}opacity-${opacity}`);
+
+    const themeTextOpacities = isEmpty(THEME_CONFIG?.textOpacity) ? allOpacities : THEME_CONFIG?.textOpacity;
+    const extendedThemeTextOpacities = THEME_CONFIG?.extend?.textOpacity;
+    const allTextOpacities = extendedThemeTextOpacities ? { ...themeTextOpacities, ...extendedThemeTextOpacities } : themeTextOpacities;
+    const textOpacities = Object.keys(allTextOpacities).map(opacity => `${prefix}text-opacity-${opacity}`);
+
     const themeBreakpoints = isEmpty(THEME_CONFIG?.screens) ? defaultScreens : THEME_CONFIG?.screens;
     const extendedThemeBreakpoints = THEME_CONFIG?.extend?.screens;
     const breakpoints = extendedThemeBreakpoints
@@ -121,7 +138,9 @@ export function createFileWithGeneratedTypes({ configFilename, outputFilename }:
       .replace(/BACKGROUND_COLORS/g, generateTypes(backgroundColors))
       .replace(/PLACEHOLDER_COLORS/g, generateTypes(placeholderColors))
       .replace(/BORDER_COLORS/g, generateTypes(borderColors))
-      .replace(/TEXT_COLORS/g, generateTypes(textColors));
+      .replace(/TEXT_COLORS/g, generateTypes(textColors))
+      .replace(/TEXT_OPACITIES/g, generateTypes(textOpacities))
+      .replace(/OPACITIES/g, generateTypes(opacities));
 
     fs.writeFile(`${outputFilename}`, result, 'utf8', error => {
       if (error) {

src/utils.ts

@@ -151,6 +151,14 @@ export const defaultSpacing = {
   '64': '16rem',
 };
 
+export const defaultOpacities = {
+  '0': '0',
+  '25': '0.25',
+  '50': '0.5',
+  '75': '0.75',
+  '100': '1',
+};
+
 export const baseTemplateString = `
 import classnamesLib from 'classnames';
 
@@ -755,9 +763,11 @@ export type TBoxShadow =
   | '_PREFIX_shadow-outline'
   | '_PREFIX_shadow-none';
 
-export type TOpacity = '_PREFIX_opacity-100' | '_PREFIX_opacity-75' | '_PREFIX_opacity-50' | '_PREFIX_opacity-25' | '_PREFIX_opacity-0';
+export type TOpacity =OPACITIES;
+
+export type TTextOpacity =TEXT_OPACITIES;
 
-export type TEffects = TBoxShadow | TOpacity;
+export type TEffects = TBoxShadow | TOpacity | TTextOpacity;
 
 export type TTransitionProperty =
   | '_PREFIX_transition-none'