oddsgate-ds 1.0.168 → 1.0.171

package/src/styles/utilities.ts

@@ -1,374 +1,374 @@
-import {
-  colors,
-  desktop_width,
-  gradients,
-  grid_conf,
-  radius,
-  shadows,
-  spaces,
-  spacesNegative,
-  typography,
-  zIndexes
-} from './variables';
-
-export const fontSize = (typo: string) => {
-  const size = parseInt(typography[typo].size as string);
-  const percentage = 0.2;
-
-  const min = typography[typo].sizeMob ?? typography[typo].size; // check if size mobile exists
-  const max = ((size / desktop_width) * 100).toFixed(3); // get vw value divise font size for desktop width
-  const range = Math.ceil(size + (size * percentage)); // use desktop font-size and add a range of percentage
-
-  return `
-    font-size: clamp(${min}, ${max}vw, ${range}px);
-    line-height: ${typography[typo].height};
-  `
-}
-
-const spacers = {
-  "auto": "auto",
-  ...spaces
-}
-
-
-export const utilities: {
-  [key: string]: {
-    responsive?: boolean;
-    property?: string;
-    class?: string;
-    values?: {
-      [key: string]: string | number;
-    };
-    important?: boolean;
-  };
-} = {
-  "align": {
-    property: "vertical-align",
-    class: "align",
-    values: {
-      top: "top",
-      middle: "middle",
-      bottom: "bottom"
-    },
-  },
-  "display": {
-    responsive: true,
-    property: "display",
-    class: "d",
-    values: {
-      "inline-block": "inline-block",
-      "inline-flex": "inline-flex",
-      block: "block",
-      table: "table",
-      flex: "flex",
-      none: "none"
-    },
-    important: true,
-  },
-  "position": {
-    responsive: true,
-    property: "position",
-    values: {
-      relative: "relative",
-      absolute: "absolute",
-      sticky: "sticky",
-      fixed: "fixed"
-    },
-    important: true,
-  },
-  "width": {
-    responsive: true,
-    property: "width",
-    class: "w",
-    values: {
-      100: "100%",
-      auto: "auto"
-    }
-  },
-  "height": {
-    property: "height",
-    class: "h",
-    values: {
-      100: "100%",
-      auto: "auto"
-    }
-  },
-  "flex-flow": {
-    responsive: true,
-    property: "flex-flow",
-    values: {
-      row: "row",
-      column: "column",
-    }
-  },
-  "flex-grow": {
-    responsive: true,
-    property: "flex-grow",
-    values: {
-      0: "0",
-      1: "1",
-    }
-  },
-  "flex-shrink": {
-    responsive: true,
-    property: "flex-shrink",
-    values: {
-      0: "0",
-      1: "1",
-    }
-  },
-  "flex-wrap": {
-    responsive: true,
-    property: "flex-wrap",
-    class: 'flex',
-    values: {
-      wrap: "wrap",
-      nowrap: "nowrap"
-    },
-  },
-  "justify-content": {
-    responsive: true,
-    property: "justify-content",
-    values: {
-      start: "flex-start",
-      end: "flex-end",
-      center: "center",
-      between: "space-between",
-      around: "space-around",
-      evenly: "space-evenly",
-    },
-    important: true,
-  },
-  "align-items": {
-    responsive: true,
-    property: "align-items",
-    values: {
-      start: "flex-start",
-      end: "flex-end",
-      center: "center",
-      baseline: "baseline",
-      stretch: "stretch",
-    },
-    important: true,
-  },
-  "align-content": {
-    responsive: true,
-    property: "align-content",
-    values: {
-      start: "flex-start",
-      end: "flex-end",
-      center: "center",
-      between: "space-between",
-      around: "space-around",
-      stretch: "stretch",
-    },
-    important: true,
-  },
-  "align-self": {
-    responsive: true,
-    property: "align-self",
-    values: {
-      auto: "auto",
-      start: "flex-start",
-      end: "flex-end",
-      center: "center",
-      baseline: "baseline",
-      stretch: "stretch",
-    },
-    important: true,
-  },
-  "order": {
-    responsive: true,
-    property: "order",
-    values: {
-      first: -1,
-      0: 0,
-      1: 1,
-      2: 2,
-      3: 3,
-      4: 4,
-      5: 5,
-      last: 6,
-    },
-  },
-  "gap": {
-    responsive: true,
-    property: "gap",
-    class: "gap",
-    values: spacers
-  },
-  "margin": {
-    responsive: true,
-    property: "margin",
-    class: "m",
-    values: spacers,
-    important: true,
-  },
-  "margin-top": {
-    responsive: true,
-    property: "margin-top",
-    class: "mt",
-    values: spacers
-  },
-  "negative-margin-top": {
-    responsive: true,
-    property: "margin-top",
-    class: "mt-neg",
-    values: spacesNegative
-  },
-  "margin-end": {
-    responsive: true,
-    property: "margin-right",
-    class: "me",
-    values: spacers
-  },
-  "margin-bottom": {
-    responsive: true,
-    property: "margin-bottom",
-    class: "mb",
-    values: spacers
-  },
-  "margin-start": {
-    responsive: true,
-    property: "margin-left",
-    class: "ms",
-    values: spacers
-  },
-  "negative-margin-start": {
-    responsive: true,
-    property: "margin-left",
-    class: "ms-neg",
-    values: spacesNegative
-  },
-  "padding": {
-    responsive: true,
-    property: "padding",
-    class: "p",
-    values: spaces,
-    important: true,
-  },
-  "padding-top": {
-    responsive: true,
-    property: "padding-top",
-    class: "pt",
-    values: spaces
-  },
-  "padding-end": {
-    responsive: true,
-    property: "padding-right",
-    class: "pe",
-    values: spaces
-  },
-  "padding-bottom": {
-    responsive: true,
-    property: "padding-bottom",
-    class: "pb",
-    values: spaces
-  },
-  "padding-start": {
-    responsive: true,
-    property: "padding-left",
-    class: "ps",
-    values: spaces
-  },
-  "font-weight": {
-    property: "font-weight",
-    class: "fw",
-    values: {
-      light: 300,
-      regular: 400,
-      semibold: 600,
-      bold: 700,
-      black: 800
-    },
-    important: true,
-  },
-  "text-align": {
-    responsive: true,
-    property: "text-align",
-    class: "text",
-    values: {
-      start: "left",
-      end: "right",
-      center: "center",
-    }
-  },
-  "text-transform": {
-    property: "text-transform",
-    class: "text",
-    values: {
-      lowercase: "lowercase",
-      uppercase: "uppercase",
-      capitalize: "capitalize"
-    }
-  },
-  "color": {
-    property: "color",
-    class: "color",
-    values: colors,
-    important: true,
-  },
-  "gradient": {
-    property: "background",
-    class: "gradient",
-    values: gradients,
-    important: true,
-  },
-  "bg": {
-    property: "background-color",
-    class: "bg",
-    values: colors,
-    important: true,
-  },
-  "shadow": {
-    property: "box-shadow",
-    class: "shadow",
-    values: shadows,
-    important: true,
-  },
-  "radius": {
-    property: "border-radius",
-    class: "radius",
-    values: radius,
-    responsive: true,
-  },
-  "zIndex": {
-    property: "z-index",
-    class: "zIndex",
-    values: zIndexes
-  },
-};
-
-export function generateUtilities(utility: string, breakpoint: string): string {
-  const property: string | undefined = utilities[utility]?.property;
-  const className: string | undefined = utilities[utility]?.class || property;
-  const values: { [key: string]: string | number } | undefined = utilities[utility]?.values;
-  const responsive: boolean | undefined = utilities[utility]?.responsive;
-  const important: boolean | undefined = utilities[utility]?.important;
-  let cssSelector: string = "";
-
-  Object.keys(values || {}).map((key: string, i: number) => {
-    cssSelector += `.${`${className}-${key}`}{
-      ${property}: ${values?.[key]}${important ? " !important" : ""};
-    }`;
-  });
-
-  Object.keys(values || {}).map((key: string, i: number) => {
-    if (responsive) {
-      cssSelector += `
-      ${`.${className}-md-${key}`}{
-        @media (min-width: ${grid_conf.breakpoints.$md as string}){
-          ${property}: ${values?.[key]}${important ? " !important" : ""};
-        }
-      }
-      ${`.${className}-lg-${key}`}{
-        @media (min-width: ${grid_conf.breakpoints.$lg}){
-          ${property}: ${values?.[key]}${important ? " !important" : ""};
-        }
-      }
-    `;
-    }
-  });
-
-  return cssSelector;
-}
+import {
+  colors,
+  desktop_width,
+  gradients,
+  grid_conf,
+  radius,
+  shadows,
+  spaces,
+  spacesNegative,
+  typography,
+  zIndexes
+} from './variables';
+
+export const fontSize = (typo: string) => {
+  const size = parseInt(typography[typo].size as string);
+  const percentage = 0.2;
+
+  const min = typography[typo].sizeMob ?? typography[typo].size; // check if size mobile exists
+  const max = ((size / desktop_width) * 100).toFixed(3); // get vw value divise font size for desktop width
+  const range = Math.ceil(size + (size * percentage)); // use desktop font-size and add a range of percentage
+
+  return `
+    font-size: clamp(${min}, ${max}vw, ${range}px);
+    line-height: ${typography[typo].height};
+  `
+}
+
+const spacers = {
+  "auto": "auto",
+  ...spaces
+}
+
+
+export const utilities: {
+  [key: string]: {
+    responsive?: boolean;
+    property?: string;
+    class?: string;
+    values?: {
+      [key: string]: string | number;
+    };
+    important?: boolean;
+  };
+} = {
+  "align": {
+    property: "vertical-align",
+    class: "align",
+    values: {
+      top: "top",
+      middle: "middle",
+      bottom: "bottom"
+    },
+  },
+  "display": {
+    responsive: true,
+    property: "display",
+    class: "d",
+    values: {
+      "inline-block": "inline-block",
+      "inline-flex": "inline-flex",
+      block: "block",
+      table: "table",
+      flex: "flex",
+      none: "none"
+    },
+    important: true,
+  },
+  "position": {
+    responsive: true,
+    property: "position",
+    values: {
+      relative: "relative",
+      absolute: "absolute",
+      sticky: "sticky",
+      fixed: "fixed"
+    },
+    important: true,
+  },
+  "width": {
+    responsive: true,
+    property: "width",
+    class: "w",
+    values: {
+      100: "100%",
+      auto: "auto"
+    }
+  },
+  "height": {
+    property: "height",
+    class: "h",
+    values: {
+      100: "100%",
+      auto: "auto"
+    }
+  },
+  "flex-flow": {
+    responsive: true,
+    property: "flex-flow",
+    values: {
+      row: "row",
+      column: "column",
+    }
+  },
+  "flex-grow": {
+    responsive: true,
+    property: "flex-grow",
+    values: {
+      0: "0",
+      1: "1",
+    }
+  },
+  "flex-shrink": {
+    responsive: true,
+    property: "flex-shrink",
+    values: {
+      0: "0",
+      1: "1",
+    }
+  },
+  "flex-wrap": {
+    responsive: true,
+    property: "flex-wrap",
+    class: 'flex',
+    values: {
+      wrap: "wrap",
+      nowrap: "nowrap"
+    },
+  },
+  "justify-content": {
+    responsive: true,
+    property: "justify-content",
+    values: {
+      start: "flex-start",
+      end: "flex-end",
+      center: "center",
+      between: "space-between",
+      around: "space-around",
+      evenly: "space-evenly",
+    },
+    important: true,
+  },
+  "align-items": {
+    responsive: true,
+    property: "align-items",
+    values: {
+      start: "flex-start",
+      end: "flex-end",
+      center: "center",
+      baseline: "baseline",
+      stretch: "stretch",
+    },
+    important: true,
+  },
+  "align-content": {
+    responsive: true,
+    property: "align-content",
+    values: {
+      start: "flex-start",
+      end: "flex-end",
+      center: "center",
+      between: "space-between",
+      around: "space-around",
+      stretch: "stretch",
+    },
+    important: true,
+  },
+  "align-self": {
+    responsive: true,
+    property: "align-self",
+    values: {
+      auto: "auto",
+      start: "flex-start",
+      end: "flex-end",
+      center: "center",
+      baseline: "baseline",
+      stretch: "stretch",
+    },
+    important: true,
+  },
+  "order": {
+    responsive: true,
+    property: "order",
+    values: {
+      first: -1,
+      0: 0,
+      1: 1,
+      2: 2,
+      3: 3,
+      4: 4,
+      5: 5,
+      last: 6,
+    },
+  },
+  "gap": {
+    responsive: true,
+    property: "gap",
+    class: "gap",
+    values: spacers
+  },
+  "margin": {
+    responsive: true,
+    property: "margin",
+    class: "m",
+    values: spacers,
+    important: true,
+  },
+  "margin-top": {
+    responsive: true,
+    property: "margin-top",
+    class: "mt",
+    values: spacers
+  },
+  "negative-margin-top": {
+    responsive: true,
+    property: "margin-top",
+    class: "mt-neg",
+    values: spacesNegative
+  },
+  "margin-end": {
+    responsive: true,
+    property: "margin-right",
+    class: "me",
+    values: spacers
+  },
+  "margin-bottom": {
+    responsive: true,
+    property: "margin-bottom",
+    class: "mb",
+    values: spacers
+  },
+  "margin-start": {
+    responsive: true,
+    property: "margin-left",
+    class: "ms",
+    values: spacers
+  },
+  "negative-margin-start": {
+    responsive: true,
+    property: "margin-left",
+    class: "ms-neg",
+    values: spacesNegative
+  },
+  "padding": {
+    responsive: true,
+    property: "padding",
+    class: "p",
+    values: spaces,
+    important: true,
+  },
+  "padding-top": {
+    responsive: true,
+    property: "padding-top",
+    class: "pt",
+    values: spaces
+  },
+  "padding-end": {
+    responsive: true,
+    property: "padding-right",
+    class: "pe",
+    values: spaces
+  },
+  "padding-bottom": {
+    responsive: true,
+    property: "padding-bottom",
+    class: "pb",
+    values: spaces
+  },
+  "padding-start": {
+    responsive: true,
+    property: "padding-left",
+    class: "ps",
+    values: spaces
+  },
+  "font-weight": {
+    property: "font-weight",
+    class: "fw",
+    values: {
+      light: 300,
+      regular: 400,
+      semibold: 600,
+      bold: 700,
+      black: 800
+    },
+    important: true,
+  },
+  "text-align": {
+    responsive: true,
+    property: "text-align",
+    class: "text",
+    values: {
+      start: "left",
+      end: "right",
+      center: "center",
+    }
+  },
+  "text-transform": {
+    property: "text-transform",
+    class: "text",
+    values: {
+      lowercase: "lowercase",
+      uppercase: "uppercase",
+      capitalize: "capitalize"
+    }
+  },
+  "color": {
+    property: "color",
+    class: "color",
+    values: colors,
+    important: true,
+  },
+  "gradient": {
+    property: "background",
+    class: "gradient",
+    values: gradients,
+    important: true,
+  },
+  "bg": {
+    property: "background-color",
+    class: "bg",
+    values: colors,
+    important: true,
+  },
+  "shadow": {
+    property: "box-shadow",
+    class: "shadow",
+    values: shadows,
+    important: true,
+  },
+  "radius": {
+    property: "border-radius",
+    class: "radius",
+    values: radius,
+    responsive: true,
+  },
+  "zIndex": {
+    property: "z-index",
+    class: "zIndex",
+    values: zIndexes
+  },
+};
+
+export function generateUtilities(utility: string, breakpoint: string): string {
+  const property: string | undefined = utilities[utility]?.property;
+  const className: string | undefined = utilities[utility]?.class || property;
+  const values: { [key: string]: string | number } | undefined = utilities[utility]?.values;
+  const responsive: boolean | undefined = utilities[utility]?.responsive;
+  const important: boolean | undefined = utilities[utility]?.important;
+  let cssSelector: string = "";
+
+  Object.keys(values || {}).map((key: string, i: number) => {
+    cssSelector += `.${`${className}-${key}`}{
+      ${property}: ${values?.[key]}${important ? " !important" : ""};
+    }`;
+  });
+
+  Object.keys(values || {}).map((key: string, i: number) => {
+    if (responsive) {
+      cssSelector += `
+      ${`.${className}-md-${key}`}{
+        @media (min-width: ${grid_conf.breakpoints.$md as string}){
+          ${property}: ${values?.[key]}${important ? " !important" : ""};
+        }
+      }
+      ${`.${className}-lg-${key}`}{
+        @media (min-width: ${grid_conf.breakpoints.$lg}){
+          ${property}: ${values?.[key]}${important ? " !important" : ""};
+        }
+      }
+    `;
+    }
+  });
+
+  return cssSelector;
+}