@jobber/design 0.63.0 → 0.64.0

package/dist/semantic.css

@@ -0,0 +1,45 @@
+:root {
+  --base-unit: 16px;
+  --color-interactive: hsl(107, 58%, 33%);
+  --color-interactive--hover: hsl(107, 65%, 24%);
+  --color-interactive--subtle: hsl(198, 35%, 21%);
+  --color-interactive--subtle--hover: hsl(197, 90%, 12%);
+  --color-destructive: hsl(6, 64%, 51%);
+  --color-destructive--hover: hsl(6, 100%, 35%);
+  --color-disabled: hsl(0, 0%, 72%);
+  --color-disabled--secondary: hsl(0, 0%, 93%);
+  --color-focus: hsl(198, 12%, 57%);
+  --color-critical: hsl(6, 64%, 51%);
+  --color-critical--surface: hsl(7, 63%, 95%);
+  --color-critical--onSurface: hsl(6, 100%, 24%);
+  --color-warning: hsl(51, 64%, 49%);
+  --color-warning--surface: hsl(52, 64%, 89%);
+  --color-warning--onSurface: hsl(51, 64%, 24%);
+  --color-success: hsl(107, 58%, 33%);
+  --color-success--surface: hsl(109, 28%, 92%);
+  --color-success--onSurface: hsl(107, 64%, 16%);
+  --color-informative: hsl(207, 79%, 57%);
+  --color-informative--surface: hsl(207, 87%, 94%);
+  --color-informative--onSurface: hsl(207, 61%, 34%);
+  --color-inactive: hsl(198, 25%, 33%);
+  --color-inactive--surface: hsl(195, 12%, 94%);
+  --color-inactive--onSurface: hsl(197, 90%, 12%);
+  --color-heading: hsl(197, 90%, 12%);
+  --color-text: hsl(198, 35%, 21%);
+  --color-text--secondary: hsl(197, 15%, 45%);
+  --color-text--reverse: rgba(255, 255, 255, 1);
+  --color-text--reverse--secondary: hsl(200, 13%, 87%);
+  --color-icon: hsl(198, 35%, 21%);
+  --color-surface: rgba(255, 255, 255, 1);
+  --color-surface--hover: hsl(53, 21%, 93%);
+  --color-surface--reverse: hsl(197, 90%, 12%);
+  --color-surface--active: hsl(51, 17%, 85%);
+  --color-surface--background: hsl(53, 21%, 93%);
+  --color-surface--background--hover: hsl(51, 17%, 85%);
+  --color-surface--background--subtle: hsl(45, 20%, 97%);
+  --color-surface--background--subtle--hover: hsl(51, 17%, 85%);
+  --color-border: hsl(200, 13%, 87%);
+  --color-border--interactive: hsl(200, 13%, 87%);
+  --color-border--section: hsl(197, 90%, 12%);
+  --color-brand: hsl(79, 85%, 34%);
+}

package/package.json

@@ -1,59 +1,78 @@
 {
   "name": "@jobber/design",
-  "version": "0.63.0",
+  "version": "0.64.0",
   "description": "Design foundation for the Jobber Atlantis Design System",
   "license": "MIT",
-  "main": "dist/index.js",
+  "type": "module",
+  "main": "dist/index.cjs",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    },
+    "./foundation": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    },
+    "./foundation.js": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    },
+    "./dist/foundation.css": "./dist/foundation.css",
+    "./foundation.css": {
+      "import": "./dist/foundation.css",
+      "require": "./dist/foundation.css"
+    },
+    "./dist/dark.mode.css": "./dist/dark.mode.css",
+    "./dark.mode.css": {
+      "import": "./dist/dark.mode.css",
+      "require": "./dist/dark.mode.css"
+    },
+    "./colors": {
+      "import": "./dist/colors.mjs",
+      "require:": "./dist/colors.cjs"
+    },
+    "./colors.js": {
+      "import": "./dist/colors.mjs",
+      "require:": "./dist/colors.cjs"
+    }
+  },
   "files": [
     "dist/*",
     "*.css",
+    "*.mjs",
+    "*.cjs",
+    "*.js",
     "foundation.*",
     "icons/*"
   ],
   "scripts": {
-    "build": "npm run build:iconMap && npm run build:css && npm run build:css:icons && npm run build:colors && npm run build:cssTypes && npm run build:foundation && npm run build:iconCssStyle && npm run build:rollup",
-    "build:rollup": "rollup --config",
-    "build:css": "postcss src/foundation.css --output foundation.css --use postcss-import",
-    "build:css:icons": "postcss src/icons/*.css --dir icons/ --use postcss-import",
-    "build:ts": "tsc --project .",
-    "build:cssTypes": "tcm src/icons",
-    "build:colors": "node buildColors.js",
-    "build:foundation": "node buildFoundation.js && node resolveFoundationTokens.js && npm run build:foundationTypes && npm run build:addFoundationExceptions && npm run build:removeTempFiles",
-    "build:foundationTypes": "tsc --declaration --emitDeclarationOnly --allowJs foundation.js foundation.native.js foundation.android.js foundation.ios.js --outDir . --skipLibCheck",
-    "build:addFoundationExceptions": "./scripts/addFoundationExceptions.sh",
-    "build:removeTempFiles": "rm -f src/foundation.js && ./scripts/removeFoundationTempFiles.sh",
-    "build:iconMap": "ts-node --project ../../tsconfig.bin.json scripts/generateIconMap.ts",
-    "build:iconCssStyle": "node buildIconStyles.js && npm run build:iconCssStyleTypes",
-    "build:iconCssStyleTypes": "tsc --declaration --emitDeclarationOnly --allowJs src/icons/iconStyles.ts --outDir ./src/icons --skipLibCheck",
-    "clean": "rm -rf dist/* icons/* src/icons/iconMap.ts colors.js foundation.* iconStyles.* tsconfig.tsbuildinfo",
+    "build:design": "rollup -c rollup.config.mjs",
+    "generate:iconMap": "tsx src/scripts/buildIconMap.ts",
+    "generate:tokenCSS": "tsx src/scripts/buildTokens.ts",
+    "generate:assets": "npm run generate:iconMap && npm run generate:tokenCSS",
+    "build": "mkdir -p dist && npm run generate:assets && npm run build:design",
+    "watch": "mkdir -p dist & chokidar \"**/*.ts\" \"**/*.json\" \"**/*.svg\"-c \"npm run generate:assets && npm run build:design\"",
+    "clean": "rm -rf dist colors.js foundation.css src/assets colors.cjs colors.mjs",
     "bootstrap": "npm run clean && npm run build"
   },
-  "dependencies": {
-    "classnames": "^2.3.2"
-  },
   "devDependencies": {
-    "@csstools/postcss-extract": "^2.0.1",
-    "@csstools/postcss-global-data": "^1.0.3",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@types/node": "^18.15.7",
-    "autoprefixer": "^9.5.1",
-    "cheerio": "^1.0.0-rc.12",
-    "css-to-react-native-transform": "^2.0.0",
-    "postcss": "^8.4.21",
-    "postcss-calc": "^8.2.3",
-    "postcss-cli": "^10.1.0",
-    "postcss-custom-properties": "^13.1.4",
-    "postcss-import": "^15.1.0",
-    "postcss-preset-env": "^8.3.0",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/jsdom": "^21.1.7",
+    "jsdom": "^24.1.0",
+    "postcss": "^8.4.39",
+    "postcss-calc": "^10.0.0",
+    "postcss-cli": "^11.0.0",
+    "postcss-import": "^16.1.0",
     "rollup": "^4.13.0",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-multi-input": "^1.4.1",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "svgo": "^3.0.2",
-    "typed-css-modules": "^0.7.0",
-    "typescript": "^4.9.5"
+    "tsx": "^4.16.2"
   },
-  "gitHead": "98d9817ee15a20b4621d662f673ea81df25e01df"
+  "gitHead": "02f3d1f70bf477916078b9e03f786783eab62d2e"
 }

package/rollup.config.mjs

@@ -0,0 +1,19 @@
+import typescript from "@rollup/plugin-typescript";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import pluginjson from "@rollup/plugin-json";
+
+export default {
+  input: "src/index.ts",
+  output: [
+    {
+      file: "dist/index.mjs",
+      format: "es",
+    },
+    {
+      file: "dist/index.cjs",
+      format: "cjs",
+    },
+  ],
+  plugins: [nodeResolve(), commonjs(), pluginjson(), typescript()],
+};

package/dist/icons/Icon.css.d.ts

@@ -1,40 +0,0 @@
-declare const styles: {
-  readonly "icon": string;
-  readonly "longArrowUp": string;
-  readonly "longArrowDown": string;
-  readonly "longArrowRight": string;
-  readonly "longArrowLeft": string;
-  readonly "thumbsDown": string;
-  readonly "person": string;
-  readonly "clients": string;
-  readonly "company": string;
-  readonly "property": string;
-  readonly "job": string;
-  readonly "jobOnHold": string;
-  readonly "visit": string;
-  readonly "moveVisits": string;
-  readonly "event": string;
-  readonly "quote": string;
-  readonly "request": string;
-  readonly "task": string;
-  readonly "userUnassigned": string;
-  readonly "reminder": string;
-  readonly "trash": string;
-  readonly "checkmark": string;
-  readonly "timer": string;
-  readonly "invoice": string;
-  readonly "invoiceLater": string;
-  readonly "sendInvoice": string;
-  readonly "paidInvoice": string;
-  readonly "badInvoice": string;
-  readonly "payment": string;
-  readonly "expense": string;
-  readonly "video": string;
-  readonly "excel": string;
-  readonly "pdf": string;
-  readonly "word": string;
-  readonly "runningTimer": string;
-  readonly "spinning": string;
-};
-export = styles;
-

package/dist/icons/IconColors.css.d.ts

@@ -1,52 +0,0 @@
-declare const styles: {
-  readonly "white": string;
-  readonly "grey": string;
-  readonly "greyBlue": string;
-  readonly "greyBlueDark": string;
-  readonly "greyBlueLighter": string;
-  readonly "blue": string;
-  readonly "lightBlue": string;
-  readonly "green": string;
-  readonly "yellow": string;
-  readonly "red": string;
-  readonly "navy": string;
-  readonly "orange": string;
-  readonly "interactive": string;
-  readonly "interactiveHover": string;
-  readonly "destructive": string;
-  readonly "destructiveHover": string;
-  readonly "interactiveSubtle": string;
-  readonly "interactiveSubtleHover": string;
-  readonly "disabled": string;
-  readonly "disabledSecondary": string;
-  readonly "focus": string;
-  readonly "critical": string;
-  readonly "criticalSurface": string;
-  readonly "criticalOnSurface": string;
-  readonly "warning": string;
-  readonly "warningSurface": string;
-  readonly "warningOnSurface": string;
-  readonly "success": string;
-  readonly "successSurface": string;
-  readonly "successOnSurface": string;
-  readonly "informative": string;
-  readonly "informativeSurface": string;
-  readonly "informativeOnSurface": string;
-  readonly "inactive": string;
-  readonly "inactiveSurface": string;
-  readonly "inactiveOnSurface": string;
-  readonly "heading": string;
-  readonly "text": string;
-  readonly "textSecondary": string;
-  readonly "textReverse": string;
-  readonly "textReverseSecondary": string;
-  readonly "surface": string;
-  readonly "surfaceHover": string;
-  readonly "surfaceActive": string;
-  readonly "surfaceBackground": string;
-  readonly "surfaceReverse": string;
-  readonly "brand": string;
-  readonly "brandHighlight": string;
-};
-export = styles;
-

package/dist/icons/Sizes.css.d.ts

@@ -1,7 +0,0 @@
-declare const styles: {
-  readonly "small": string;
-  readonly "base": string;
-  readonly "large": string;
-};
-export = styles;
-

package/dist/icons/getIcon.d.ts

@@ -1,31 +0,0 @@
-import sizes from "./Sizes.css";
-import colors from "./IconColors.css";
-import { iconMap } from "./iconMap";
-export declare const iconClassMap: {};
-export declare const sizesClassMap: {};
-export declare const colorsClassMap: {};
-export type IconNames = keyof typeof iconMap.icons | "longArrowUp" | "longArrowDown" | "longArrowRight" | "longArrowLeft" | "remove" | "thumbsDown" | "truck";
-export type IconColorNames = keyof typeof colors;
-export type IconSizes = keyof typeof sizes;
-interface IconProps {
-    /** The icon to show.  */
-    readonly name: IconNames;
-    /**
-     * Changes the size to small or large.
-     * @default base
-     */
-    readonly size?: IconSizes;
-    /**
-     * Determines the color of the icon. Some icons have a default system colour
-     * like quotes, jobs, and invoices. Others that doesn't have a system colour
-     * falls back to greyBlueDark.
-     */
-    readonly color?: IconColorNames;
-}
-export declare function getIcon({ name, color, size }: IconProps): {
-    readonly svgClassNames: string;
-    readonly pathClassNames: string;
-    readonly paths: string[];
-    readonly viewBox: string;
-};
-export {};

package/dist/icons/getIcon.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/icons/iconStyles.d.ts

@@ -1,278 +0,0 @@
-export declare const iconStyles: {
-    icon: {
-        fill: string;
-        display: string;
-        verticalAlign: string;
-    };
-    longArrowUp: {
-        transform: {
-            rotate: string;
-        }[];
-    };
-    longArrowDown: {
-        transform: {
-            rotate: string;
-        }[];
-    };
-    longArrowRight: {
-        transform: {
-            rotate: string;
-        }[];
-    };
-    longArrowLeft: {
-        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;
-    };
-    video: {
-        fill: string;
-    };
-    excel: {
-        fill: string;
-    };
-    pdf: {
-        fill: string;
-    };
-    word: {
-        fill: string;
-    };
-    runningTimer: {
-        animationDuration: string;
-        animationIterationCount: string;
-        animationName: string;
-        animationTimingFunction: 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;
-    };
-    greyBlueLighter: {
-        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;
-    };
-};