@bgord/design 0.28.0 → 0.29.0

package/src/generators/flex-shrinks-generator.ts

@@ -0,0 +1,28 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class FlexShrinksGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Flex shrinks");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular display: data-shrink="*"
+    for (const [key, value] of Object.entries(this.config.FlexShrinks)) {
+      output += `*[data-shrink='${key}'] {\n  flex-shrink: ${value};\n}\n`;
+    }
+
+    for (const [name, value] of Object.entries(this.config.Breakpoints)) {
+      output += `@media (max-width: ${value}px) {\n`;
+
+      for (const [key, value] of Object.entries(this.config.FlexShrinks)) {
+        output += `  *[data-${name}-shrink='${key}'] {\n    flex-shrink: ${value};\n  }\n`;
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  }
+}

package/src/generators/flex-wraps-generator.ts

@@ -0,0 +1,28 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class FlexWrapGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Flex wraps");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular display: data-wrap="*"
+    for (const [key, value] of Object.entries(this.config.FlexWraps)) {
+      output += `*[data-wrap='${key}'] {\n  flex-wrap: ${value};\n}\n`;
+    }
+
+    for (const [name, value] of Object.entries(this.config.Breakpoints)) {
+      output += `@media (max-width: ${value}px) {\n`;
+
+      for (const [key, value] of Object.entries(this.config.FlexWraps)) {
+        output += `  *[data-${name}-wrap='${key}'] {\n    flex-wrap: ${value};\n  }\n`;
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  }
+}

package/src/{font-colors-generator.ts → generators/font-colors-generator.ts}

@@ -1,21 +1,21 @@
-import { AbstractGenerator, GeneratorConfigType } from './generator';
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
 
 export class FontColorsGenerator extends AbstractGenerator {
-  colors: GeneratorConfigType['grayscale'];
+  colors: GeneratorConfigType["Grayscale"];
 
   constructor(config: GeneratorConfigType) {
-    super('Font colors');
+    super("Font colors");
 
     this.colors = {
-      ...config.grayscale,
-      ...config.greens,
-      ...config.reds,
-      ...config.oranges,
+      ...config.Grayscale,
+      ...config.Greens,
+      ...config.Reds,
+      ...config.Oranges,
     };
   }
 
   generateCss(): string {
-    let output = '';
+    let output = "";
 
     // Regular display: data-color="*"
     for (const [key, value] of Object.entries(this.colors)) {

package/src/generators/font-size-generator.ts

@@ -0,0 +1,28 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class FontSizeGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Font sizes");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular display: data-fs="*"
+    for (const [key, value] of Object.entries(this.config.FontSizes)) {
+      output += `*[data-fs='${key}'] {\n  font-size: ${value}px;\n}\n`;
+    }
+
+    for (const [name, value] of Object.entries(this.config.Breakpoints)) {
+      output += `@media (max-width: ${value}px) {\n`;
+
+      for (const [key, value] of Object.entries(this.config.FontSizes)) {
+        output += `  *[data-${name}-fs='${key}'] {\n    font-size: ${value}px;\n  }\n`;
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  }
+}

package/src/generators/font-weight-generator.ts

@@ -0,0 +1,18 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class FontWeightGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Font weights");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular display: data-fw="*"
+    for (const [key, value] of Object.entries(this.config.FontWeights)) {
+      output += `*[data-fw='${key}'] {\n  font-weight: ${value};\n}\n`;
+    }
+
+    return output;
+  }
+}

package/src/generators/gap-generator.ts

@@ -0,0 +1,28 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class GapGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Gaps");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular gap: data-gap="*"
+    for (const [key, value] of Object.entries(this.config.Spacing)) {
+      output += `*[data-gap='${key}'] {\n  gap: ${value};\n}\n`;
+    }
+
+    for (const [name, value] of Object.entries(this.config.Breakpoints)) {
+      output += `@media (max-width: ${value}px) {\n`;
+
+      for (const [key, value] of Object.entries(this.config.Spacing)) {
+        output += `  *[data-${name}-gap='${key}'] {\n    gap: ${value};\n  }\n`;
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  }
+}

package/src/generators/heights-generator.ts

@@ -0,0 +1,28 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class HeightsGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Heights");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular display: data-height="*"
+    for (const [key, value] of Object.entries(this.config.Heights)) {
+      output += `*[data-height='${key}'] {\n  height: ${value};\n}\n`;
+    }
+
+    for (const [name, value] of Object.entries(this.config.Breakpoints)) {
+      output += `@media (max-width: ${value}px) {\n`;
+
+      for (const [key, value] of Object.entries(this.config.Heights)) {
+        output += `  *[data-${name}-height='${key}'] {\n    height: ${value};\n  }\n`;
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  }
+}

package/src/generators/index.ts

@@ -0,0 +1,34 @@
+export * from "./axis-placements-generator";
+export * from "./backdrops-generator";
+export * from "./backgrounds-generator";
+export * from "./border-colors-generator";
+export * from "./border-radiuses-generator";
+export * from "./border-widths-generator";
+export * from "./cursors-generator";
+export * from "./displays-generator";
+export * from "./flex-directions-generator";
+export * from "./flex-grows-generator";
+export * from "./flex-shrinks-generator";
+export * from "./flex-wraps-generator";
+export * from "./font-colors-generator";
+export * from "./font-size-generator";
+export * from "./font-weight-generator";
+export * from "./gap-generator";
+export * from "./heights-generator";
+export * from "./letter-spacings-generator";
+export * from "./line-height-generator";
+export * from "./margins-generator";
+export * from "./max-heights-generator";
+export * from "./max-widths-generator";
+export * from "./object-fits-generator";
+export * from "./object-positions-generator";
+export * from "./overflows-generator";
+export * from "./paddings-generator";
+export * from "./pointer-events-generator";
+export * from "./positioners-generator";
+export * from "./positions-generator";
+export * from "./rotates-generator";
+export * from "./shadows-generator";
+export * from "./transforms-generator";
+export * from "./widths-generator";
+export * from "./z-index-generator";

package/src/generators/letter-spacings-generator.ts

@@ -0,0 +1,18 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class LetterSpacingsGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Letter spacings");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular display: data-ls="*"
+    for (const [key, value] of Object.entries(this.config.LetterSpacings)) {
+      output += `*[data-ls='${key}'] {\n  letter-spacing: ${value}px;\n}\n`;
+    }
+
+    return output;
+  }
+}

package/src/generators/line-height-generator.ts

@@ -0,0 +1,18 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class LineHeightsGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Line heights");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular display: data-lh="*"
+    for (const [key, value] of Object.entries(this.config.LineHeights)) {
+      output += `*[data-lh='${key}'] {\n  line-height: ${value}px;\n}\n`;
+    }
+
+    return output;
+  }
+}

package/src/{margins-generator.ts → generators/margins-generator.ts}

@@ -1,79 +1,73 @@
-import { AbstractGenerator, GeneratorConfigType } from './generator';
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
 
 export class Margins extends AbstractGenerator {
-  spacing: GeneratorConfigType['spacing'];
-  breakpoints: GeneratorConfigType['breakpoints'];
-
-  constructor(config: GeneratorConfigType) {
-    super('Margins');
-
-    this.spacing = config.spacing;
-    this.breakpoints = config.breakpoints;
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Margins");
   }
 
   generateCss(): string {
-    let output = '';
+    let output = "";
 
-    for (const [key, value] of Object.entries(this.spacing)) {
+    for (const [key, value] of Object.entries(this.config.Spacing)) {
       output += `*[data-m='${key}'] {\n  margin: ${value};\n}\n`;
     }
 
-    for (const [key, value] of Object.entries(this.spacing)) {
+    for (const [key, value] of Object.entries(this.config.Spacing)) {
       output += `*[data-mx='${key}'] {\n  margin-left: ${value};\n  margin-right: ${value};\n}\n`;
     }
 
-    for (const [key, value] of Object.entries(this.spacing)) {
+    for (const [key, value] of Object.entries(this.config.Spacing)) {
       output += `*[data-my='${key}'] {\n  margin-top: ${value};\n  margin-bottom: ${value};\n}\n`;
     }
 
-    for (const [key, value] of Object.entries(this.spacing)) {
+    for (const [key, value] of Object.entries(this.config.Spacing)) {
       output += `*[data-mt='${key}'] {\n  margin-top: ${value};\n}\n`;
     }
 
-    for (const [key, value] of Object.entries(this.spacing)) {
+    for (const [key, value] of Object.entries(this.config.Spacing)) {
       output += `*[data-mr='${key}'] {\n  margin-right: ${value};\n}\n`;
     }
 
-    for (const [key, value] of Object.entries(this.spacing)) {
+    for (const [key, value] of Object.entries(this.config.Spacing)) {
       output += `*[data-mb='${key}'] {\n  margin-bottom: ${value};\n}\n`;
     }
 
-    for (const [key, value] of Object.entries(this.spacing)) {
+    for (const [key, value] of Object.entries(this.config.Spacing)) {
       output += `*[data-ml='${key}'] {\n  margin-left: ${value};\n}\n`;
     }
 
-    for (const [name, value] of Object.entries(this.breakpoints)) {
+    for (const [name, value] of Object.entries(this.config.Breakpoints)) {
       output += `@media (max-width: ${value}px) {\n`;
 
-      for (const [key, value] of Object.entries(this.spacing)) {
+      for (const [key, value] of Object.entries(this.config.Spacing)) {
         output += `  *[data-${name}-m='${key}'] {\n    margin: ${value};\n  }\n`;
       }
 
-      for (const [key, value] of Object.entries(this.spacing)) {
+      for (const [key, value] of Object.entries(this.config.Spacing)) {
         output += `  *[data-${name}-mx='${key}'] {\n    margin-left: ${value};\n    margin-right: ${value};\n  }\n`;
       }
 
-      for (const [key, value] of Object.entries(this.spacing)) {
+      for (const [key, value] of Object.entries(this.config.Spacing)) {
         output += `  *[data-${name}-my='${key}'] {\n    margin-top: ${value};\n    margin-bottom: ${value};\n  }\n`;
       }
 
-      for (const [key, value] of Object.entries(this.spacing)) {
+      for (const [key, value] of Object.entries(this.config.Spacing)) {
         output += `  *[data-${name}-mt='${key}'] {\n    margin-top: ${value};\n  }\n`;
       }
 
-      for (const [key, value] of Object.entries(this.spacing)) {
+      for (const [key, value] of Object.entries(this.config.Spacing)) {
         output += `  *[data-${name}-mr='${key}'] {\n    margin-right: ${value};\n  }\n`;
       }
 
-      for (const [key, value] of Object.entries(this.spacing)) {
+      for (const [key, value] of Object.entries(this.config.Spacing)) {
         output += `  *[data-${name}-mb='${key}'] {\n    margin-bottom: ${value};\n  }\n`;
       }
 
-      for (const [key, value] of Object.entries(this.spacing)) {
+      for (const [key, value] of Object.entries(this.config.Spacing)) {
         output += `  *[data-${name}-ml='${key}'] {\n    margin-left: ${value};\n  }\n`;
       }
 
-      output += '}\n';
+      output += "}\n";
     }
 
     return output;

package/src/generators/max-heights-generator.ts

@@ -0,0 +1,28 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class MaxHeightsGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Max heights");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular display: data-max-height="*"
+    for (const [key, value] of Object.entries(this.config.MaxHeights)) {
+      output += `*[data-max-height='${key}'] {\n  max-height: ${value};\n}\n`;
+    }
+
+    for (const [name, value] of Object.entries(this.config.Breakpoints)) {
+      output += `@media (max-width: ${value}px) {\n`;
+
+      for (const [key, value] of Object.entries(this.config.MaxHeights)) {
+        output += `*[data-${name}-max-height='${key}'] {\n  max-height: ${value};\n}\n`;
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  }
+}

package/src/generators/max-widths-generator.ts

@@ -0,0 +1,28 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class MaxWidthsGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Max widths");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular display: data-max-width="*"
+    for (const [key, value] of Object.entries(this.config.MaxWidths)) {
+      output += `*[data-max-width='${key}'] {\n  max-width: ${value};\n}\n`;
+    }
+
+    for (const [name, value] of Object.entries(this.config.Breakpoints)) {
+      output += `@media (max-width: ${value}px) {\n`;
+
+      for (const [key, value] of Object.entries(this.config.MaxWidths)) {
+        output += `*[data-${name}-max-width='${key}'] {\n  max-width: ${value};\n}\n`;
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  }
+}

package/src/generators/object-fits-generator.ts

@@ -0,0 +1,28 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class ObjectFitsGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Object fits");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular display: data-object-fit="*"
+    for (const [key, value] of Object.entries(this.config.ObjectFits)) {
+      output += `*[data-object-fit='${key}'] {\n  object-fit: ${value};\n}\n`;
+    }
+
+    for (const [name, value] of Object.entries(this.config.Breakpoints)) {
+      output += `@media (max-width: ${value}px) {\n`;
+
+      for (const [key, value] of Object.entries(this.config.ObjectFits)) {
+        output += `  *[data-${name}-object-fit='${key}'] {\n    object-fit: ${value};\n  }\n`;
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  }
+}

package/src/generators/object-positions-generator.ts

@@ -0,0 +1,28 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class ObjectPositionsGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Object positions");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular display: data-object-position="*"
+    for (const [key, value] of Object.entries(this.config.ObjectPositions)) {
+      output += `*[data-object-position='${key}'] {\n  object-position: ${value};\n}\n`;
+    }
+
+    for (const [name, value] of Object.entries(this.config.Breakpoints)) {
+      output += `@media (max-width: ${value}px) {\n`;
+
+      for (const [key, value] of Object.entries(this.config.ObjectPositions)) {
+        output += `  *[data-${name}-object-position='${key}'] {\n    object-position: ${value};\n  }\n`;
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  }
+}

package/src/generators/overflows-generator.ts

@@ -0,0 +1,18 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class OverflowsGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Overflows");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular display: data-overflow="*"
+    for (const [key, value] of Object.entries(this.config.Overflows)) {
+      output += `*[data-overflow='${key}'] {\n  overflow: ${value};\n}\n`;
+    }
+
+    return output;
+  }
+}

package/src/{paddings-generator.ts → generators/paddings-generator.ts}

@@ -1,86 +1,80 @@
-import { AbstractGenerator, GeneratorConfigType } from './generator';
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
 
 export class Paddings extends AbstractGenerator {
-  spacing: GeneratorConfigType['spacing'];
-  breakpoints: GeneratorConfigType['breakpoints'];
-
-  constructor(config: GeneratorConfigType) {
-    super('Paddings');
-
-    this.spacing = config.spacing;
-    this.breakpoints = config.breakpoints;
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Paddings");
   }
 
   generateCss(): string {
-    let output = '';
+    let output = "";
 
     // Regular padding: data-p="*"
-    for (const [key, value] of Object.entries(this.spacing)) {
+    for (const [key, value] of Object.entries(this.config.Spacing)) {
       output += `*[data-p='${key}'] {\n  padding: ${value};\n}\n`;
     }
 
     // Horizontal padding: data-px="*"
-    for (const [key, value] of Object.entries(this.spacing)) {
+    for (const [key, value] of Object.entries(this.config.Spacing)) {
       output += `*[data-px='${key}'] {\n  padding-left: ${value};\n  padding-right: ${value};\n}\n`;
     }
 
     // Vertical padding: data-py="*"
-    for (const [key, value] of Object.entries(this.spacing)) {
+    for (const [key, value] of Object.entries(this.config.Spacing)) {
       output += `*[data-py='${key}'] {\n  padding-top: ${value};\n  padding-bottom: ${value};\n}\n`;
     }
 
     // Top padding: data-pt="*"
-    for (const [key, value] of Object.entries(this.spacing)) {
+    for (const [key, value] of Object.entries(this.config.Spacing)) {
       output += `*[data-pt='${key}'] {\n  padding-top: ${value};\n}\n`;
     }
 
     // Right padding: data-pr="*"
-    for (const [key, value] of Object.entries(this.spacing)) {
+    for (const [key, value] of Object.entries(this.config.Spacing)) {
       output += `*[data-pr='${key}'] {\n  padding-right: ${value};\n}\n`;
     }
 
     // Bottom padding: data-pb="*"
-    for (const [key, value] of Object.entries(this.spacing)) {
+    for (const [key, value] of Object.entries(this.config.Spacing)) {
       output += `*[data-pb='${key}'] {\n  padding-bottom: ${value};\n}\n`;
     }
 
     // Left padding: data-pl="*"
-    for (const [key, value] of Object.entries(this.spacing)) {
+    for (const [key, value] of Object.entries(this.config.Spacing)) {
       output += `*[data-pl='${key}'] {\n  padding-left: ${value};\n}\n`;
     }
 
-    for (const [name, value] of Object.entries(this.breakpoints)) {
+    for (const [name, value] of Object.entries(this.config.Breakpoints)) {
       output += `@media (max-width: ${value}px) {\n`;
 
-      for (const [key, value] of Object.entries(this.spacing)) {
+      for (const [key, value] of Object.entries(this.config.Spacing)) {
         output += `  *[data-${name}-p='${key}'] {\n    padding: ${value};\n  }\n`;
       }
 
-      for (const [key, value] of Object.entries(this.spacing)) {
+      for (const [key, value] of Object.entries(this.config.Spacing)) {
         output += `  *[data-${name}-px='${key}'] {\n    padding-left: ${value};\n    padding-right: ${value};\n  }\n`;
       }
 
-      for (const [key, value] of Object.entries(this.spacing)) {
+      for (const [key, value] of Object.entries(this.config.Spacing)) {
         output += `  *[data-${name}-py='${key}'] {\n    padding-top: ${value};\n    padding-bottom: ${value};\n  }\n`;
       }
 
-      for (const [key, value] of Object.entries(this.spacing)) {
+      for (const [key, value] of Object.entries(this.config.Spacing)) {
         output += `  *[data-${name}-pt='${key}'] {\n    padding-top: ${value};\n  }\n`;
       }
 
-      for (const [key, value] of Object.entries(this.spacing)) {
+      for (const [key, value] of Object.entries(this.config.Spacing)) {
         output += `  *[data-${name}-pr='${key}'] {\n    padding-right: ${value};\n  }\n`;
       }
 
-      for (const [key, value] of Object.entries(this.spacing)) {
+      for (const [key, value] of Object.entries(this.config.Spacing)) {
         output += `  *[data-${name}-pb='${key}'] {\n    padding-bottom: ${value};\n  }\n`;
       }
 
-      for (const [key, value] of Object.entries(this.spacing)) {
+      for (const [key, value] of Object.entries(this.config.Spacing)) {
         output += `  *[data-${name}-pl='${key}'] {\n    padding-left: ${value};\n  }\n`;
       }
 
-      output += '}\n';
+      output += "}\n";
     }
 
     return output;

package/src/generators/pointer-events-generator.ts

@@ -0,0 +1,28 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class PointerEventsGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Pointer events");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular display: data-pointer-events="*"
+    for (const [key, value] of Object.entries(this.config.PointerEvents)) {
+      output += `*[data-pointer-events='${key}'] {\n  pointer-events: ${value};\n}\n`;
+    }
+
+    for (const [name, value] of Object.entries(this.config.Breakpoints)) {
+      output += `@media (max-width: ${value}px) {\n`;
+
+      for (const [key, value] of Object.entries(this.config.PointerEvents)) {
+        output += `  *[data-${name}-pointer-events='${key}'] {\n    pointer-events: ${value};\n  }\n`;
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  }
+}