@bgord/design 0.28.0 → 0.29.0

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

@@ -1,20 +1,14 @@
-import { AbstractGenerator, GeneratorConfigType } from './generator';
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
 
 export class PositionersGenerator extends AbstractGenerator {
-  spacing: GeneratorConfigType['spacing'];
-  breakpoints: GeneratorConfigType['breakpoints'];
-
-  constructor(config: GeneratorConfigType) {
-    super('Positioners');
-
-    this.spacing = config.spacing;
-    this.breakpoints = config.breakpoints;
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Positioners");
   }
 
   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-top='${key}'] {\n  top: ${value};\n}\n`;
       output += `*[data-right='${key}'] {\n  right: ${value};\n}\n`;
       output += `*[data-bottom='${key}'] {\n  bottom: ${value};\n}\n`;
@@ -22,10 +16,10 @@ export class PositionersGenerator extends AbstractGenerator {
       output += `*[data-inset='${key}'] {\n  inset: ${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}-top='${key}'] {\n  top: ${value};\n}\n`;
         output += `*[data-${name}-right='${key}'] {\n  right: ${value};\n}\n`;
         output += `*[data-${name}-bottom='${key}'] {\n  bottom: ${value};\n}\n`;

package/src/generators/positions-generator.ts

@@ -0,0 +1,28 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class PositionsGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Positions");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular display: data-position="*"
+    for (const [key, value] of Object.entries(this.config.Positions)) {
+      output += `*[data-position='${key}'] {\n  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.Positions)) {
+        output += `  *[data-${name}-position='${key}'] {\n    position: ${value};\n  }\n`;
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  }
+}

package/src/generators/rotates-generator.ts

@@ -0,0 +1,28 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class RotatesGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Rotates");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular display: data-rotate="*"
+    for (const [key, value] of Object.entries(this.config.Rotates)) {
+      output += `*[data-rotate='${key}'] {\n  transform: rotate(${value}deg);\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.Rotates)) {
+        output += `  *[data-${name}-rotate='${key}'] {\n    transform: rotate(${value}deg);\n  }\n`;
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  }
+}

package/src/generators/shadows-generator.ts

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

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

@@ -1,40 +1,36 @@
-import { AbstractGenerator, GeneratorConfigType } from './generator';
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
 
 export class TransformsGenerator extends AbstractGenerator {
-  transforms: GeneratorConfigType['transforms'];
-
-  constructor(config: GeneratorConfigType) {
-    super('Transforms');
-
-    this.transforms = config.transforms;
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Transforms");
   }
 
   generateCss(): string {
-    let output = '';
+    let output = "";
 
     // Regular display: data-transform~="*"
-    for (const [key, value] of Object.entries(this.transforms)) {
-      if (key === 'truncate') {
+    for (const [key, value] of Object.entries(this.config.Transforms)) {
+      if (key === "truncate") {
         output += `*[data-transform~='${key}'] {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n`;
         continue;
       }
 
-      if (key === 'line-clamp') {
+      if (key === "line-clamp") {
         output += `*[data-transform~='${key}'] {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--lines, 2); overflow: hidden;\n}\n`;
         continue;
       }
 
-      if (key === 'center') {
+      if (key === "center") {
         output += `*[data-transform~='${key}'] {\n  text-align: center;\n}\n`;
         continue;
       }
 
-      if (key === 'upper-first') {
+      if (key === "upper-first") {
         output += `*[data-transform~='upper-first']:first-letter {\n  text-transform: uppercase;\n}\n`;
         continue;
       }
 
-      if (key === 'nowrap') {
+      if (key === "nowrap") {
         output += `*[data-transform~='nowrap'] {\n  white-space: nowrap;\n}\n`;
         continue;
       }

package/src/generators/widths-generator.ts

@@ -0,0 +1,28 @@
+import { AbstractGenerator, GeneratorConfigType } from "../generator";
+
+export class WidthsGenerator extends AbstractGenerator {
+  constructor(private readonly config: GeneratorConfigType) {
+    super("Widths");
+  }
+
+  generateCss(): string {
+    let output = "";
+
+    // Regular display: data-width="*"
+    for (const [key, value] of Object.entries(this.config.Widths)) {
+      output += `*[data-width='${key}'] {\n  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.Widths)) {
+        output += `  *[data-${name}-width='${key}'] {\n    width: ${value};\n  }\n`;
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  }
+}

package/src/generators/z-index-generator.ts

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

package/src/index.ts

@@ -0,0 +1,3 @@
+import { main } from "./generate-css";
+
+main();

package/src/normalize.css

@@ -117,7 +117,6 @@ a {
 abbr[title] {
   border-bottom: none; /* 1 */
   text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
 }
 
 /**
@@ -228,9 +227,9 @@ select {
  */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+[type="button"],
+[type="reset"],
+[type="submit"] {
   -webkit-appearance: button;
 }
 
@@ -239,9 +238,9 @@ button,
  */
 
 button::-moz-focus-inner,
-[type='button']::-moz-focus-inner,
-[type='reset']::-moz-focus-inner,
-[type='submit']::-moz-focus-inner {
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
@@ -249,14 +248,14 @@ button::-moz-focus-inner,
 /**
  * Remove step arrows from the numeric input
  */
-input[type='number']::-webkit-outer-spin-button,
-input[type='number']::-webkit-inner-spin-button {
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
   appearance: none;
   margin: 0;
 }
 
 /* Firefox */
-input[type='number'] {
+input[type="number"] {
   appearance: textfield;
 }
 
@@ -265,9 +264,9 @@ input[type='number'] {
  */
 
 button:-moz-focusring,
-[type='button']:-moz-focusring,
-[type='reset']:-moz-focusring,
-[type='submit']:-moz-focusring {
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
@@ -316,8 +315,8 @@ textarea {
  * 2. Remove the padding in IE 10.
  */
 
-[type='checkbox'],
-[type='radio'] {
+[type="checkbox"],
+[type="radio"] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
@@ -326,8 +325,8 @@ textarea {
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -336,7 +335,7 @@ textarea {
  * 2. Correct the outline style in Safari.
  */
 
-[type='search'] {
+[type="search"] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
@@ -345,7 +344,7 @@ textarea {
  * Remove the inner padding in Chrome and Safari on macOS.
  */
 
-[type='search']::-webkit-search-decoration {
+[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 

package/src/rules/button-empty-content.css

@@ -0,0 +1,5 @@
+/* cspell:disable */
+button:empty:not([aria-label]):not([aria-labelledby]) {
+  border: 2px solid red !important;
+  content: "Rule #9 violation (button-empty-content)";
+}

package/src/rules/button-icon-title.css

@@ -1,4 +1,4 @@
 button:not([title]) > svg {
   border: 2px solid red !important;
-  content: 'Rule #4 violation (button-icon-title)';
+  content: "Rule #4 violation (button-icon-title)";
 }

package/src/rules/focusable-hidden-element.css

@@ -0,0 +1,5 @@
+/* cspell:disable */
+[hidden][tabindex]:not([tabindex="-1"]) {
+  border: 2px solid red !important;
+  content: "Rule #8 violation (focusable-hidden-element)";
+}

package/src/rules/image-alt.css

@@ -1,4 +1,4 @@
 img:not([alt]) {
   border: 2px solid red;
-  content: 'Rule #3 violation (image-alt)';
+  content: "Rule #3 violation (image-alt)";
 }

package/src/rules/input-missing-id.css

@@ -0,0 +1,4 @@
+input:not([id]) {
+  border: 2px solid red !important;
+  content: "Rule #7 violation (input-missing-id)";
+}

package/src/rules/input-missing-name.css

@@ -0,0 +1,4 @@
+input:not([name]) {
+  border: 2px solid red !important;
+  content: "Rule #10 violation (input-missing-name)";
+}

package/src/rules/invalid-list-element.css

@@ -6,5 +6,5 @@ ul > *:not(li):after {
   background: red;
   position: absolute;
   inset: 0;
-  content: 'Rule #5 violation (invalid-list-element)';
+  content: "Rule #5 violation (invalid-list-element)";
 }

package/src/rules/link-empty-href.css

@@ -0,0 +1,5 @@
+a:not([href]),
+a[href=""] {
+  border: 2px solid red !important;
+  content: "Rule #6 violation (link-empty-href)";
+}

package/src/rules/target-blank-referer.css

@@ -1,10 +1,10 @@
-[target='_blank']:not([rel]) {
+[target="_blank"]:not([rel]) {
   position: relative;
 }
 
-[target='_blank']:not([rel]):after {
+[target="_blank"]:not([rel]):after {
   background: red;
   position: absolute;
   inset: 0;
-  content: 'Rule #2 violation (target-blank-referer)';
+  content: "Rule #2 violation (target-blank-referer)";
 }

package/src/rules/title-truncate.css

@@ -1,19 +1,19 @@
-[data-transform='truncate']:not([title]) {
+[data-transform="truncate"]:not([title]) {
   position: relative;
 }
-[data-transform='truncate']:not([title]):after {
+[data-transform="truncate"]:not([title]):after {
   background: red;
   position: absolute;
   inset: 0;
-  content: 'Rule #1 violation (title-truncate)';
+  content: "Rule #1 violation (title-truncate)";
 }
 
-[data-transform='line-clamp']:not([title]) {
+[data-transform="line-clamp"]:not([title]) {
   position: relative;
 }
-[data-transform='line-clamp']:not([title]):after {
+[data-transform="line-clamp"]:not([title]):after {
   background: red;
   position: absolute;
   inset: 0;
-  content: 'Rule #1 violation (title-truncate)';
+  content: "Rule #1 violation (title-truncate)";
 }