@jobber/design 0.27.9 → 0.28.0

package/src/icons/iconStyles.d.ts

@@ -0,0 +1,262 @@
+export declare const iconStyles: {
+    icon: {
+        fill: string;
+        display: string;
+        verticalAlign: string;
+    };
+    longArrowUp: {
+        transform: {
+            rotate: string;
+        }[];
+    };
+    longArrowDown: {
+        transform: {
+            rotate: string;
+        }[];
+    };
+    thumbsDown: {
+        transform: {
+            scaleY: number;
+        }[];
+    };
+    person: {
+        fill: string;
+    };
+    clients: {
+        fill: string;
+    };
+    company: {
+        fill: string;
+    };
+    property: {
+        fill: string;
+    };
+    job: {
+        fill: string;
+    };
+    jobOnHold: {
+        fill: string;
+    };
+    visit: {
+        fill: string;
+    };
+    moveVisits: {
+        fill: string;
+    };
+    event: {
+        fill: string;
+    };
+    quote: {
+        fill: string;
+    };
+    request: {
+        fill: string;
+    };
+    task: {
+        fill: string;
+    };
+    userUnassigned: {
+        fill: string;
+    };
+    reminder: {
+        fill: string;
+    };
+    trash: {
+        fill: string;
+    };
+    checkmark: {
+        fill: string;
+    };
+    timer: {
+        fill: string;
+    };
+    invoice: {
+        fill: string;
+    };
+    invoiceLater: {
+        fill: string;
+    };
+    sendInvoice: {
+        fill: string;
+    };
+    paidInvoice: {
+        fill: string;
+    };
+    badInvoice: {
+        fill: string;
+    };
+    payment: {
+        fill: string;
+    };
+    expense: {
+        fill: string;
+    };
+    archive: {
+        fill: string;
+    };
+    video: {
+        fill: string;
+    };
+    excel: {
+        fill: string;
+    };
+    pdf: {
+        fill: string;
+    };
+    word: {
+        fill: string;
+    };
+    small: {
+        width: number;
+        height: number;
+    };
+    base: {
+        width: number;
+        height: number;
+    };
+    large: {
+        width: number;
+        height: number;
+    };
+    white: {
+        fill: string;
+    };
+    grey: {
+        fill: string;
+    };
+    greyBlue: {
+        fill: string;
+    };
+    greyBlueDark: {
+        fill: string;
+    };
+    blue: {
+        fill: string;
+    };
+    lightBlue: {
+        fill: string;
+    };
+    green: {
+        fill: string;
+    };
+    yellow: {
+        fill: string;
+    };
+    red: {
+        fill: string;
+    };
+    navy: {
+        fill: string;
+    };
+    orange: {
+        fill: string;
+    };
+    interactive: {
+        fill: string;
+    };
+    interactiveHover: {
+        fill: string;
+    };
+    destructive: {
+        fill: string;
+    };
+    destructiveHover: {
+        fill: string;
+    };
+    interactiveSubtle: {
+        fill: string;
+    };
+    interactiveSubtleHover: {
+        fill: string;
+    };
+    disabled: {
+        fill: string;
+    };
+    disabledSecondary: {
+        fill: string;
+    };
+    focus: {
+        fill: string;
+    };
+    critical: {
+        fill: string;
+    };
+    criticalSurface: {
+        fill: string;
+    };
+    criticalOnSurface: {
+        fill: string;
+    };
+    warning: {
+        fill: string;
+    };
+    warningSurface: {
+        fill: string;
+    };
+    warningOnSurface: {
+        fill: string;
+    };
+    success: {
+        fill: string;
+    };
+    successSurface: {
+        fill: string;
+    };
+    successOnSurface: {
+        fill: string;
+    };
+    informative: {
+        fill: string;
+    };
+    informativeSurface: {
+        fill: string;
+    };
+    informativeOnSurface: {
+        fill: string;
+    };
+    inactive: {
+        fill: string;
+    };
+    inactiveSurface: {
+        fill: string;
+    };
+    inactiveOnSurface: {
+        fill: string;
+    };
+    heading: {
+        fill: string;
+    };
+    text: {
+        fill: string;
+    };
+    textSecondary: {
+        fill: string;
+    };
+    textReverse: {
+        fill: string;
+    };
+    textReverseSecondary: {
+        fill: string;
+    };
+    surface: {
+        fill: string;
+    };
+    surfaceHover: {
+        fill: string;
+    };
+    surfaceActive: {
+        fill: string;
+    };
+    surfaceBackground: {
+        fill: string;
+    };
+    surfaceReverse: {
+        fill: string;
+    };
+    brand: {
+        fill: string;
+    };
+    brandHighlight: {
+        fill: string;
+    };
+};

package/src/icons/iconStyles.ts

@@ -0,0 +1,269 @@
+/* This file is automatically generated by buildIconStyle.js and should not be edited. */
+export const iconStyles = {
+  "icon": {
+    "fill": "rgba(101, 120, 132, 1)",
+    "display": "inline-block",
+    "verticalAlign": "middle"
+  },
+  "longArrowUp": {
+    "transform": [
+      {
+        "rotate": "90deg"
+      }
+    ]
+  },
+  "longArrowDown": {
+    "transform": [
+      {
+        "rotate": "-90deg"
+      }
+    ]
+  },
+  "thumbsDown": {
+    "transform": [
+      {
+        "scaleY": -1
+      }
+    ]
+  },
+  "person": {
+    "fill": "rgb(62, 173, 146)"
+  },
+  "clients": {
+    "fill": "rgb(62, 173, 146)"
+  },
+  "company": {
+    "fill": "rgb(62, 173, 146)"
+  },
+  "property": {
+    "fill": "rgb(62, 173, 146)"
+  },
+  "job": {
+    "fill": "rgb(187, 197, 32)"
+  },
+  "jobOnHold": {
+    "fill": "rgb(187, 197, 32)"
+  },
+  "visit": {
+    "fill": "rgb(153, 193, 70)"
+  },
+  "moveVisits": {
+    "fill": "rgb(153, 193, 70)"
+  },
+  "event": {
+    "fill": "rgb(221, 195, 15)"
+  },
+  "quote": {
+    "fill": "rgb(179, 96, 150)"
+  },
+  "request": {
+    "fill": "rgb(85, 106, 203)"
+  },
+  "task": {
+    "fill": "rgb(75, 106, 150)"
+  },
+  "userUnassigned": {
+    "fill": "rgb(201, 66, 33)"
+  },
+  "reminder": {
+    "fill": "rgb(201, 66, 33)"
+  },
+  "trash": {
+    "fill": "rgb(201, 66, 33)"
+  },
+  "checkmark": {
+    "fill": "rgb(125, 176, 14)"
+  },
+  "timer": {
+    "fill": "rgb(60, 162, 224)"
+  },
+  "invoice": {
+    "fill": "rgb(136, 112, 196)"
+  },
+  "invoiceLater": {
+    "fill": "rgb(136, 112, 196)"
+  },
+  "sendInvoice": {
+    "fill": "rgb(136, 112, 196)"
+  },
+  "paidInvoice": {
+    "fill": "rgb(136, 112, 196)"
+  },
+  "badInvoice": {
+    "fill": "rgb(201, 66, 33)"
+  },
+  "payment": {
+    "fill": "rgb(243, 150, 36)"
+  },
+  "expense": {
+    "fill": "rgb(243, 150, 36)"
+  },
+  "archive": {
+    "fill": "rgb(1, 41, 57)"
+  },
+  "video": {
+    "fill": "rgb(60, 162, 224)"
+  },
+  "excel": {
+    "fill": "rgb(31, 115, 71)"
+  },
+  "pdf": {
+    "fill": "rgb(195, 27, 0)"
+  },
+  "word": {
+    "fill": "rgb(41, 86, 154)"
+  },
+  "small": {
+    "width": 16,
+    "height": 16
+  },
+  "base": {
+    "width": 24,
+    "height": 24
+  },
+  "large": {
+    "width": 32,
+    "height": 32
+  },
+  "white": {
+    "fill": "rgba(255, 255, 255, 1)"
+  },
+  "grey": {
+    "fill": "rgb(181, 181, 181)"
+  },
+  "greyBlue": {
+    "fill": "rgba(101, 120, 132, 1)"
+  },
+  "greyBlueDark": {
+    "fill": "rgb(66, 78, 86)"
+  },
+  "blue": {
+    "fill": "rgb(1, 41, 57)"
+  },
+  "lightBlue": {
+    "fill": "rgb(60, 162, 224)"
+  },
+  "green": {
+    "fill": "rgb(125, 176, 14)"
+  },
+  "yellow": {
+    "fill": "rgb(221, 195, 15)"
+  },
+  "red": {
+    "fill": "rgb(201, 66, 33)"
+  },
+  "navy": {
+    "fill": "rgb(75, 106, 150)"
+  },
+  "orange": {
+    "fill": "rgb(243, 150, 36)"
+  },
+  "interactive": {
+    "fill": "rgb(125, 176, 14)"
+  },
+  "interactiveHover": {
+    "fill": "rgb(81, 114, 9)"
+  },
+  "destructive": {
+    "fill": "rgb(201, 66, 33)"
+  },
+  "destructiveHover": {
+    "fill": "rgb(128, 25, 0)"
+  },
+  "interactiveSubtle": {
+    "fill": "rgba(101, 120, 132, 1)"
+  },
+  "interactiveSubtleHover": {
+    "fill": "rgb(66, 78, 86)"
+  },
+  "disabled": {
+    "fill": "rgb(181, 181, 181)"
+  },
+  "disabledSecondary": {
+    "fill": "rgb(225, 225, 225)"
+  },
+  "focus": {
+    "fill": "rgb(231, 213, 87)"
+  },
+  "critical": {
+    "fill": "rgb(201, 66, 33)"
+  },
+  "criticalSurface": {
+    "fill": "rgb(255, 226, 219)"
+  },
+  "criticalOnSurface": {
+    "fill": "rgb(128, 25, 0)"
+  },
+  "warning": {
+    "fill": "rgb(221, 195, 15)"
+  },
+  "warningSurface": {
+    "fill": "rgb(250, 246, 219)"
+  },
+  "warningOnSurface": {
+    "fill": "rgb(144, 127, 10)"
+  },
+  "success": {
+    "fill": "rgb(125, 176, 14)"
+  },
+  "successSurface": {
+    "fill": "rgb(236, 243, 219)"
+  },
+  "successOnSurface": {
+    "fill": "rgb(81, 114, 9)"
+  },
+  "informative": {
+    "fill": "rgb(60, 162, 224)"
+  },
+  "informativeSurface": {
+    "fill": "rgb(226, 241, 250)"
+  },
+  "informativeOnSurface": {
+    "fill": "rgb(39, 105, 146)"
+  },
+  "inactive": {
+    "fill": "rgb(77, 105, 116)"
+  },
+  "inactiveSurface": {
+    "fill": "rgb(217, 223, 225)"
+  },
+  "inactiveOnSurface": {
+    "fill": "rgb(1, 27, 37)"
+  },
+  "heading": {
+    "fill": "rgb(1, 41, 57)"
+  },
+  "text": {
+    "fill": "rgb(66, 78, 86)"
+  },
+  "textSecondary": {
+    "fill": "rgba(101, 120, 132, 1)"
+  },
+  "textReverse": {
+    "fill": "rgba(255, 255, 255, 1)"
+  },
+  "textReverseSecondary": {
+    "fill": "rgb(193, 201, 206)"
+  },
+  "surface": {
+    "fill": "rgba(255, 255, 255, 1)"
+  },
+  "surfaceHover": {
+    "fill": "rgb(250, 246, 219)"
+  },
+  "surfaceActive": {
+    "fill": "rgb(236, 243, 219)"
+  },
+  "surfaceBackground": {
+    "fill": "rgb(244, 244, 244)"
+  },
+  "surfaceReverse": {
+    "fill": "rgb(1, 41, 57)"
+  },
+  "brand": {
+    "fill": "rgb(125, 176, 14)"
+  },
+  "brandHighlight": {
+    "fill": "rgb(160, 215, 42)"
+  }
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export {
+  getIcon,
+  IconNames,
+  IconColorNames,
+  IconSizes,
+  iconClassMap,
+  sizesClassMap,
+  colorsClassMap,
+} from "./icons/getIcon";
+export { iconStyles } from "./icons/iconStyles";

package/src/radii.css

@@ -0,0 +1,6 @@
+:root {
+  --radius-base: var(--space-smallest);
+  --radius-large: var(--space-smaller);
+  --radius-larger: var(--space-small);
+  --radius-circle: 100%;
+}

package/src/responsiveBreakpoints.css

@@ -0,0 +1,3 @@
+@custom-media --handhelds (width < 640px);
+@custom-media --medium-screens (width >= 640px);
+@custom-media --wide-screens (width >= 1024px);

package/src/shadows.css

@@ -0,0 +1,13 @@
+:root {
+  --shadow-low: 0px var(--space-minuscule) var(--space-smallest)
+      rgba(0, 0, 0, 0.25),
+    0px 0px var(--space-smallest) rgba(0, 0, 0, 0.1);
+  --shadow-base: 0px var(--space-minuscule) var(--space-smaller) 0px
+      rgba(0, 0, 0, 0.1),
+    0px var(--space-smaller) 12px 0px rgba(0, 0, 0, 0.05);
+  --shadow-high: 0px var(--space-base) var(--space-base) 0px
+      rgba(0, 0, 0, 0.075),
+    0px 0px var(--space-small) 0px rgba(0, 0, 0, 0.05);
+  --shadow-focus: 0px 0px var(--space-smaller) var(--space-smallest)
+    var(--color-focus);
+}

package/src/spacing.css

@@ -0,0 +1,13 @@
+:root {
+  --base-unit: 16px;
+
+  --space-minuscule: calc(var(--base-unit) / 16);
+  --space-smallest: calc(var(--base-unit) / 8);
+  --space-smaller: calc(var(--base-unit) / 4);
+  --space-small: calc(var(--base-unit) / 2);
+  --space-base: calc(var(--base-unit) * 1);
+  --space-large: calc(var(--base-unit) * 1.5);
+  --space-larger: calc(var(--base-unit) * 2);
+  --space-largest: calc(var(--base-unit) * 3);
+  --space-extravagant: calc(var(--base-unit) * 4);
+}

package/src/styles.css

@@ -0,0 +1,9 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700;900&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+
+body {
+  color: var(--color-text);
+  font-family: var(--typography--fontFamily-normal);
+  font-size: var(--typography--fontSize-base);
+  line-height: var(--typography--lineHeight-larger, 1.5);
+  background-color: var(--color-surface);
+}

package/src/timings.css

@@ -0,0 +1,7 @@
+:root {
+  --timing-quick: 100ms;
+  --timing-base: 200ms;
+  --timing-slow: 300ms;
+  --timing-slower: 400ms;
+  --timing-slowest: 500ms;
+}

package/src/typography.css

@@ -0,0 +1,53 @@
+:root {
+  --typography--letterSpacing-base: 0;
+  --typography--letterSpacing-loose: calc(var(--base-unit) / 40);
+
+  --typography--fontFamily-normal: "Inter", Helvetica, Arial, sans-serif;
+  --typography--fontFamily-display: "Jobber Pro", "Poppins", Helvetica, Arial,
+    sans-serif;
+
+  --typography--fontSize-extravagant: calc(
+    var(--typography--fontSize-large) * 3
+  );
+  /* 48 */
+  --typography--fontSize-jumbo: calc(var(--typography--fontSize-large) * 2.25);
+  /* 36 */
+  --typography--fontSize-largest: calc(var(--typography--fontSize-large) * 1.5);
+  /* 24 */
+  --typography--fontSize-larger: calc(var(--typography--fontSize-large) * 1.25);
+  /* 20 */
+  --typography--fontSize-large: calc(var(--base-unit) * 1);
+  /* 16 */
+  --typography--fontSize-base: calc(var(--typography--fontSize-large) * 0.875);
+  /* 14 */
+  --typography--fontSize-small: calc(var(--typography--fontSize-large) * 0.75);
+  /* 12 */
+  --typography--fontSize-smaller: calc(
+    var(--typography--fontSize-large) * 0.625
+  );
+  /* 10 */
+
+  --typography--lineHeight-large: 1.34;
+  --typography--lineHeight-base: 1.25;
+  --typography--lineHeight-tight: 1.2;
+  --typography--lineHeight-tighter: 1.143;
+  --typography--lineHeight-tightest: 1.12;
+  --typography--lineHeight-miniscule: 1.08;
+}
+
+@media (--handhelds) {
+  :root {
+    --typography--fontSize-extravagant: calc(
+      var(--typography--fontSize-large) * 2.5
+    );
+    /* 40 */
+    --typography--fontSize-jumbo: calc(
+      var(--typography--fontSize-large) * 1.75
+    );
+    /* 28 */
+    --typography--fontSize-largest: calc(
+      var(--typography--fontSize-large) * 1.375
+    );
+    /* 22 */
+  }
+}