@rettangoli/ui 0.1.0

package/src/styles/flexChildStyles.js

@@ -0,0 +1,43 @@
+import { css } from '../common.js'
+
+export default css`
+:host([flex="0"]) {
+  flex: 0;
+}
+:host([flex="1"]) {
+  flex: 1;
+}
+:host([flex="2"]) {
+  flex: 2;
+}
+:host([flex="3"]) {
+  flex: 3;
+}
+:host([flex="4"]) {
+  flex: 4;
+}
+:host([flex="5"]) {
+  flex: 5;
+}
+:host([flex="6"]) {
+  flex: 6;
+}
+:host([flex="7"]) {
+  flex: 7;
+}
+:host([flex="8"]) {
+  flex: 8;
+}
+:host([flex="9"]) {
+  flex: 9;
+}
+:host([flex="10"]) {
+  flex: 10;
+}
+:host([flex="11"]) {
+  flex: 11;
+}
+:host([flex="12"]) {
+  flex: 12;
+}
+`

package/src/styles/flexDirectionStyles.js

@@ -0,0 +1,74 @@
+import { css } from "../common.js";
+
+export default css`
+
+  :host([d="h"]) {
+    flex-direction: row;
+  }
+  :host([d="v"]) {
+    flex-direction: column;
+  }
+  :host([d="h"]:not([ah])) {
+    justify-content: flex-start;
+  }
+  :host([d="h"][ah="c"]) {
+    justify-content: center;
+  }
+  :host([d="h"][ah="e"]) {
+    justify-content: flex-end;
+  }
+  :host([d="h"]:not([av])) {
+    align-items: flex-start;
+  }
+  :host([d="h"][av="c"]) {
+    align-items: center;
+    align-content: center;
+  }
+  :host([d="h"][av="e"]) {
+    align-items: flex-end;
+    align-content: flex-end;
+  }
+  
+  /* Default/vertical direction - horizontal alignment */
+  :host(:not([d]):not([ah])),
+  :host([d="v"]:not([ah])) {
+    align-items: flex-start;
+  }
+  :host(:not([d])[ah="c"]),
+  :host([d="v"][ah="c"]) {
+    align-items: center;
+  }
+  :host(:not([d])[ah="e"]),
+  :host([d="v"][ah="e"]) {
+    align-items: flex-end;
+  }
+  
+  :host(:not([d]):not([av])),
+  :host([d="v"]:not([av])) {
+    justify-content: flex-start;
+  }
+  :host(:not([d])[av="c"]),
+  :host([d="v"][av="c"]) {
+    justify-content: center;
+  }
+  :host(:not([d])[av="e"]),
+  :host([d="v"][av="e"]) {
+    justify-content: flex-end;
+  }
+  
+  @media screen and (max-width: 640px) {
+    :host([s-d="v"]) {
+      flex-direction: column;
+    }
+    :host([s-d="h"]) {
+      flex-direction: row;
+    }
+    :host([s-d="h"][s-av="c"]) {
+      align-items: center;
+      align-content: center;
+    }
+    :host([s-d="v"][s-av="c"]) {
+      justify-content: center;
+    }
+  }
+`;

package/src/styles/marginStyles.js

@@ -0,0 +1,13 @@
+import { generateCSS, spacing } from "../common.js";
+
+const styles = {
+  mt: spacing,
+  mr: spacing,
+  mb: spacing,
+  ml: spacing,
+  m: spacing,
+  mh: spacing,
+  mv: spacing,
+};
+
+export default generateCSS(styles)

package/src/styles/paddingSvgStyles.js

@@ -0,0 +1,120 @@
+
+import { css } from '../common.js'
+
+export default css`
+:host([pt="xs"]) svg {
+  padding-top: var(--spacing-xs);
+}
+:host([pt="sm"]) svg {
+  padding-top: var(--spacing-sm);
+}
+:host([pt="md"]) svg {
+  padding-top: var(--spacing-md);
+}
+:host([pt="lg"]) svg {
+  padding-top: var(--spacing-lg);
+}
+:host([pt="xl"]) svg {
+  padding-top: var(--spacing-xl);
+}
+:host([pr="xs"]) svg {
+  padding-right: var(--spacing-xs);
+}
+:host([pr="sm"]) svg {
+  padding-right: var(--spacing-sm);
+}
+:host([pr="md"]) svg {
+  padding-right: var(--spacing-md);
+}
+:host([pr="lg"]) svg {
+  padding-right: var(--spacing-lg);
+}
+:host([pr="xl"]) svg {
+  padding-right: var(--spacing-xl);
+}
+:host([pb="xs"]) svg {
+  padding-bottom: var(--spacing-xs);
+}
+:host([pb="sm"]) svg {
+  padding-bottom: var(--spacing-sm);
+}
+:host([pb="md"]) svg {
+  padding-bottom: var(--spacing-md);
+}
+:host([pb="lg"]) svg {
+  padding-bottom: var(--spacing-lg);
+}
+:host([pb="xl"]) svg {
+  padding-bottom: var(--spacing-xl);
+}
+:host([pl="xs"]) svg {
+  padding-left: var(--spacing-xs);
+}
+:host([pl="sm"]) svg {
+  padding-left: var(--spacing-sm);
+}
+:host([pl="md"]) svg {
+  padding-left: var(--spacing-md);
+}
+:host([pl="lg"]) svg {
+  padding-left: var(--spacing-lg);
+}
+:host([pl="xl"]) svg {
+  padding-left: var(--spacing-xl);
+}
+:host([p="xs"]) svg {
+  padding: var(--spacing-xs);
+}
+:host([p="sm"]) svg {
+  padding: var(--spacing-sm);
+}
+:host([p="md"]) svg {
+  padding: var(--spacing-md);
+}
+:host([p="lg"]) svg {
+  padding: var(--spacing-lg);
+}
+:host([p="xl"]) svg {
+  padding: var(--spacing-xl);
+}
+:host([ph="xs"]) svg {
+  padding-left: var(--spacing-xs);
+  padding-right: var(--spacing-xs);
+}
+:host([ph="sm"]) svg {
+  padding-left: var(--spacing-sm);
+  padding-right: var(--spacing-sm);
+}
+:host([ph="md"]) svg {
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+:host([ph="lg"]) svg {
+  padding-left: var(--spacing-lg);
+  padding-right: var(--spacing-lg);
+}
+:host([ph="xl"]) svg {
+  padding-left: var(--spacing-xl);
+  padding-right: var(--spacing-xl);
+}
+:host([pv="xs"]) svg {
+  padding-top: var(--spacing-xs);
+  padding-bottom: var(--spacing-xs);
+}
+:host([pv="sm"]) svg {
+  padding-top: var(--spacing-sm);
+  padding-bottom: var(--spacing-sm);
+}
+:host([pv="md"]) svg {
+  padding-top: var(--spacing-md);
+  padding-bottom: var(--spacing-md);
+}
+:host([pv="lg"]) svg {
+  padding-top: var(--spacing-lg);
+  padding-bottom: var(--spacing-lg);
+}
+:host([pv="xl"]) svg {
+  padding-top: var(--spacing-xl);
+  padding-bottom: var(--spacing-xl);
+}
+`

package/src/styles/scrollStyles.js

@@ -0,0 +1,22 @@
+
+import { css } from '../common.js'
+
+export default css`
+:host([sh]:not([sv])) {
+    overflow-x: scroll;
+    flex-wrap: nowrap;
+}
+:host([sv]:not([sh])) {
+    overflow-y: scroll;
+    flex-wrap: nowrap;
+}
+:host([sh][sv]) {
+    overflow: scroll;
+    flex-wrap: nowrap;
+}
+:host([overflow="hidden"]) {
+    overflow: hidden;
+    flex-wrap: nowrap;
+}
+
+`

package/src/styles/textColorStyles.js

@@ -0,0 +1,14 @@
+import { generateCSS } from "../common.js";
+
+const styles = {
+  c: {
+    "fg": "--foreground",
+    "de": "--destructive",
+    "pr-fg": "--primary-foreground",
+    "se-fg": "--secondary-foreground",
+    "mu-fg": "--muted-foreground",
+    "ac-fg": "--accent-foreground",
+  },
+};
+
+export default generateCSS(styles);

package/src/styles/textStyles.js

@@ -0,0 +1,62 @@
+import { generateCSS } from "../common.js";
+
+const styles = {
+  ta: {
+    s: 'start',
+    c: 'center',
+    e: 'end',
+    j: 'justify'
+  },
+  s: {
+    h1: `
+      font-size: var(--h1-font-size);
+      font-weight: var(--h1-font-weight);
+      line-height: var(--h1-line-height);
+      letter-spacing: var(--h1-letter-spacing);
+    `,
+    h2: `
+      font-size: var(--h2-font-size);
+      font-weight: var(--h2-font-weight);
+      line-height: var(--h2-line-height);
+      letter-spacing: var(--h2-letter-spacing);
+    `,
+    h3: `
+      font-size: var(--h3-font-size);
+      font-weight: var(--h3-font-weight);
+      line-height: var(--h3-line-height);
+      letter-spacing: var(--h3-letter-spacing);
+    `,
+    h4: `
+      font-size: var(--h4-font-size);
+      font-weight: var(--h4-font-weight);
+      line-height: var(--h4-line-height);
+      letter-spacing: var(--h4-letter-spacing);
+    `,
+    lg: `
+      font-size: var(--lg-font-size);
+      font-weight: var(--lg-font-weight);
+      line-height: var(--lg-line-height);
+      letter-spacing: var(--lg-letter-spacing);
+    `,
+    md: `
+      font-size: var(--md-font-size);
+      font-weight: var(--md-font-weight);
+      line-height: var(--md-line-height);
+      letter-spacing: var(--md-letter-spacing);
+    `,
+    sm: `
+      font-size: var(--sm-font-size);
+      font-weight: var(--sm-font-weight);
+      line-height: var(--sm-line-height);
+      letter-spacing: var(--sm-letter-spacing);
+    `,
+    xs: `
+      font-size: var(--xs-font-size);
+      font-weight: var(--xs-font-weight);
+      line-height: var(--xs-line-height);
+      letter-spacing: var(--xs-letter-spacing);
+    `,
+  },
+};
+
+export default generateCSS(styles);

package/src/styles/viewStyles.js

@@ -0,0 +1,114 @@
+import { generateCSS, spacing } from "../common.js";
+
+const borderWidth = {
+  xs: "--border-width-xs",
+  sm: "--border-width-sm",
+  md: "--border-width-md",
+  lg: "--border-width-lg",
+  xl: "--border-width-xl",
+}
+
+const styles = {
+  bgc: {
+    pr: `
+    background-color: var(--primary);
+    `,
+    se: `
+    background-color: var(--secondary);
+    `,
+    de: `
+    background-color: var(--destructive);
+    `,
+    fg: `
+    background-color: var(--foreground);
+    `,
+    bg: `
+    background-color: var(--background);
+    `,
+    mu: `
+    background-color: var(--muted);
+    `,
+    ac: `
+    background-color: var(--accent);
+    `,
+    bo: `
+    background-color: var(--border);
+    `,
+  },
+  pos: {
+    rel: "relative",
+    abs: "absolute",
+    fix: "fixed",
+  },
+  cor: {
+    full: `
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 100%;
+        `,
+    top: `
+        top: 0;
+        right: 0;
+        left: 0;
+        `,
+    right: `
+        top: 0;
+        right: 0;
+        bottom: 0;
+        height: 100%;
+        `,
+    bottom: `
+        right: 0;
+        bottom: 0;
+        left: 0;
+        `,
+    left: `
+        bottom: 0;
+        left: 0;
+        top: 0;
+        height: 100%;
+        `,
+  },
+  shadow: {
+    sm: "--shadow-sm",
+    md: "--shadow-md",
+    lg: "--shadow-lg",
+  },
+  pt: spacing,
+  pr: spacing,
+  pb:spacing,
+  pl: spacing,
+  p: spacing,
+  ph: spacing,
+  pv: spacing,
+  g: spacing,
+  gv: spacing,
+  gh: spacing,
+  bw: borderWidth,
+  bwt: borderWidth,
+  bwr: borderWidth,
+  bwb: borderWidth,
+  bwl: borderWidth,
+  bc: {
+    pr: "--primary",
+    se: "--secondary",
+    de: "--destructive",
+    fg: "--foreground",
+    bg: "--background",
+    mu: "--muted",
+    ac: "--accent",
+    bo: "--border",
+  },
+  br: {
+    xs: "--border-radius-xs",
+    sm: "--border-radius-sm",
+    md: "--border-radius-md",
+    lg: "--border-radius-lg",
+    xl: "--border-radius-xl",
+    f: "--border-radius-f",
+  },
+};
+
+export default generateCSS(styles)