@mich8060/unified-design-system 0.2.9 → 0.2.11

package/dist/tokens/typography.js

@@ -0,0 +1,95 @@
+const rootTypography = {
+    "--uds-font-family": '"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial',
+    "--uds-font-size-128": "128px",
+    "--uds-font-size-96": "96px",
+    "--uds-font-size-72": "72px",
+    "--uds-font-size-60": "60px",
+    "--uds-font-size-48": "48px",
+    "--uds-font-size-36": "36px",
+    "--uds-font-size-32": "32px",
+    "--uds-font-size-28": "28px",
+    "--uds-font-size-24": "24px",
+    "--uds-font-size-20": "20px",
+    "--uds-font-size-16": "16px",
+    "--uds-font-size-14": "14px",
+    "--uds-font-size-12": "12px",
+    "--uds-font-size-10": "10px",
+    "--uds-line-128": "136px",
+    "--uds-line-96": "104px",
+    "--uds-line-72": "80px",
+    "--uds-line-60": "68px",
+    "--uds-line-48": "56px",
+    "--uds-line-36": "44px",
+    "--uds-line-32": "40px",
+    "--uds-line-28": "36px",
+    "--uds-line-24": "32px",
+    "--uds-line-20": "28px",
+    "--uds-line-16": "24px",
+    "--uds-line-14": "20px",
+    "--uds-line-12": "16px",
+    "--uds-line-10": "14px",
+    "--uds-line-heading-20": "var(--uds-line-20)",
+    "--uds-font-weight": "400",
+    "--uds-font-weight-medium": "500",
+    "--uds-font-weight-semibold": "600",
+    "--uds-font-weight-bold": "700",
+    "--uds-typography-body-md": "var(--uds-font-weight) var(--uds-font-size-16) / var(--uds-line-16) var(--uds-font-family)",
+    "--uds-typography-body-xs": "var(--uds-font-weight) var(--uds-font-size-12) / var(--uds-line-12) var(--uds-font-family)",
+    "--uds-typography-label-md": "var(--uds-font-weight-semibold) var(--uds-font-size-14) / var(--uds-line-14) var(--uds-font-family)",
+};
+const tabletTypography = {
+    "--uds-font-size-128": "96px",
+    "--uds-line-128": "104px",
+    "--uds-font-size-96": "72px",
+    "--uds-line-96": "80px",
+    "--uds-font-size-72": "60px",
+    "--uds-line-72": "68px",
+    "--uds-font-size-60": "48px",
+    "--uds-line-60": "56px",
+    "--uds-font-size-48": "40px",
+    "--uds-line-48": "48px",
+    "--uds-font-size-36": "32px",
+    "--uds-line-36": "40px",
+    "--uds-font-size-32": "28px",
+    "--uds-line-32": "36px",
+    "--uds-font-size-28": "24px",
+    "--uds-line-28": "32px",
+    "--uds-font-size-24": "22px",
+    "--uds-line-24": "30px",
+    "--uds-font-size-20": "18px",
+    "--uds-line-20": "26px",
+};
+const mobileTypography = {
+    "--uds-font-size-128": "72px",
+    "--uds-line-128": "80px",
+    "--uds-font-size-96": "60px",
+    "--uds-line-96": "68px",
+    "--uds-font-size-72": "48px",
+    "--uds-line-72": "56px",
+    "--uds-font-size-60": "40px",
+    "--uds-line-60": "48px",
+    "--uds-font-size-48": "32px",
+    "--uds-line-48": "40px",
+    "--uds-font-size-36": "28px",
+    "--uds-line-36": "36px",
+    "--uds-font-size-32": "24px",
+    "--uds-line-32": "32px",
+    "--uds-font-size-28": "22px",
+    "--uds-line-28": "30px",
+    "--uds-font-size-24": "20px",
+    "--uds-line-24": "28px",
+    "--uds-font-size-20": "18px",
+    "--uds-line-20": "26px",
+};
+export const typographyCategory = {
+    cssVars: rootTypography,
+    media: [
+        { query: "(max-width: 1023px)", cssVars: tabletTypography },
+        { query: "(max-width: 639px)", cssVars: mobileTypography },
+    ],
+};
+export const typographyTokens = {
+    root: rootTypography,
+    tablet: tabletTypography,
+    mobile: mobileTypography,
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mich8060/unified-design-system",
   "private": false,
-  "version": "0.2.9",
+  "version": "0.2.11",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -17,27 +17,347 @@
   "homepage": "https://github.com/chghealthcare/unified-design-system#readme",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
+  "style": "./dist/style.css",
   "types": "./dist/design-system/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/design-system/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
     },
-    "./styles.css": "./dist/unified-design-system.css"
+    "./Accordion": {
+      "types": "./dist/design-system/components/Accordion/Accordion.d.ts",
+      "import": "./dist/components/Accordion/Accordion.js",
+      "require": "./dist/components/Accordion/Accordion.cjs",
+      "default": "./dist/components/Accordion/Accordion.js"
+    },
+    "./ActionMenu": {
+      "types": "./dist/design-system/components/ActionMenu/ActionMenu.d.ts",
+      "import": "./dist/components/ActionMenu/ActionMenu.js",
+      "require": "./dist/components/ActionMenu/ActionMenu.cjs",
+      "default": "./dist/components/ActionMenu/ActionMenu.js"
+    },
+    "./AppShell": {
+      "types": "./dist/app-shell/AppShell.d.ts",
+      "import": "./dist/src/app-shell/AppShell.js",
+      "require": "./dist/src/app-shell/AppShell.cjs",
+      "default": "./dist/src/app-shell/AppShell.js"
+    },
+    "./Avatar": {
+      "types": "./dist/design-system/components/Avatar/Avatar.d.ts",
+      "import": "./dist/components/Avatar/Avatar.js",
+      "require": "./dist/components/Avatar/Avatar.cjs",
+      "default": "./dist/components/Avatar/Avatar.js"
+    },
+    "./Badge": {
+      "types": "./dist/design-system/components/Badge/Badge.d.ts",
+      "import": "./dist/components/Badge/Badge.js",
+      "require": "./dist/components/Badge/Badge.cjs",
+      "default": "./dist/components/Badge/Badge.js"
+    },
+    "./Branding": {
+      "types": "./dist/design-system/components/Branding/Branding.d.ts",
+      "import": "./dist/components/Branding/Branding.js",
+      "require": "./dist/components/Branding/Branding.cjs",
+      "default": "./dist/components/Branding/Branding.js"
+    },
+    "./Breadcrumb": {
+      "types": "./dist/design-system/components/Breadcrumb/Breadcrumb.d.ts",
+      "import": "./dist/components/Breadcrumb/Breadcrumb.js",
+      "require": "./dist/components/Breadcrumb/Breadcrumb.cjs",
+      "default": "./dist/components/Breadcrumb/Breadcrumb.js"
+    },
+    "./Button": {
+      "types": "./dist/design-system/components/Button/Button.d.ts",
+      "import": "./dist/components/Button/Button.js",
+      "require": "./dist/components/Button/Button.cjs",
+      "default": "./dist/components/Button/Button.js"
+    },
+    "./Calendar": {
+      "types": "./dist/design-system/components/Calendar/Calendar.d.ts",
+      "import": "./dist/components/Calendar/Calendar.js",
+      "require": "./dist/components/Calendar/Calendar.cjs",
+      "default": "./dist/components/Calendar/Calendar.js"
+    },
+    "./Card": {
+      "types": "./dist/design-system/components/Card/Card.d.ts",
+      "import": "./dist/components/Card/Card.js",
+      "require": "./dist/components/Card/Card.cjs",
+      "default": "./dist/components/Card/Card.js"
+    },
+    "./Checkbox": {
+      "types": "./dist/design-system/components/Checkbox/Checkbox.d.ts",
+      "import": "./dist/components/Checkbox/Checkbox.js",
+      "require": "./dist/components/Checkbox/Checkbox.cjs",
+      "default": "./dist/components/Checkbox/Checkbox.js"
+    },
+    "./Chip": {
+      "types": "./dist/design-system/components/Chip/Chip.d.ts",
+      "import": "./dist/components/Chip/Chip.js",
+      "require": "./dist/components/Chip/Chip.cjs",
+      "default": "./dist/components/Chip/Chip.js"
+    },
+    "./Code": {
+      "types": "./dist/design-system/components/Code/Code.d.ts",
+      "import": "./dist/components/Code/Code.js",
+      "require": "./dist/components/Code/Code.cjs",
+      "default": "./dist/components/Code/Code.js"
+    },
+    "./Container": {
+      "types": "./dist/design-system/components/Container/Container.d.ts",
+      "import": "./dist/components/Container/Container.js",
+      "require": "./dist/components/Container/Container.cjs",
+      "default": "./dist/components/Container/Container.js"
+    },
+    "./Datepicker": {
+      "types": "./dist/design-system/components/Datepicker/Datepicker.d.ts",
+      "import": "./dist/components/Datepicker/Datepicker.js",
+      "require": "./dist/components/Datepicker/Datepicker.cjs",
+      "default": "./dist/components/Datepicker/Datepicker.js"
+    },
+    "./Dialog": {
+      "types": "./dist/design-system/components/Dialog/Dialog.d.ts",
+      "import": "./dist/components/Dialog/Dialog.js",
+      "require": "./dist/components/Dialog/Dialog.cjs",
+      "default": "./dist/components/Dialog/Dialog.js"
+    },
+    "./Divider": {
+      "types": "./dist/design-system/components/Divider/Divider.d.ts",
+      "import": "./dist/components/Divider/Divider.js",
+      "require": "./dist/components/Divider/Divider.cjs",
+      "default": "./dist/components/Divider/Divider.js"
+    },
+    "./DotStatus": {
+      "types": "./dist/design-system/components/DotStatus/DotStatus.d.ts",
+      "import": "./dist/components/DotStatus/DotStatus.js",
+      "require": "./dist/components/DotStatus/DotStatus.cjs",
+      "default": "./dist/components/DotStatus/DotStatus.js"
+    },
+    "./Dropdown": {
+      "types": "./dist/design-system/components/Dropdown/Dropdown.d.ts",
+      "import": "./dist/components/Dropdown/Dropdown.js",
+      "require": "./dist/components/Dropdown/Dropdown.cjs",
+      "default": "./dist/components/Dropdown/Dropdown.js"
+    },
+    "./EmptyState": {
+      "types": "./dist/design-system/components/EmptyState/EmptyState.d.ts",
+      "import": "./dist/components/EmptyState/EmptyState.js",
+      "require": "./dist/components/EmptyState/EmptyState.cjs",
+      "default": "./dist/components/EmptyState/EmptyState.js"
+    },
+    "./EventCard": {
+      "types": "./dist/design-system/components/EventCard/EventCard.d.ts",
+      "import": "./dist/components/EventCard/EventCard.js",
+      "require": "./dist/components/EventCard/EventCard.cjs",
+      "default": "./dist/components/EventCard/EventCard.js"
+    },
+    "./Field": {
+      "types": "./dist/design-system/components/Field/Field.d.ts",
+      "import": "./dist/components/Field/Field.js",
+      "require": "./dist/components/Field/Field.cjs",
+      "default": "./dist/components/Field/Field.js"
+    },
+    "./FileUpload": {
+      "types": "./dist/design-system/components/FileUpload/FileUpload.d.ts",
+      "import": "./dist/components/FileUpload/FileUpload.js",
+      "require": "./dist/components/FileUpload/FileUpload.cjs",
+      "default": "./dist/components/FileUpload/FileUpload.js"
+    },
+    "./Flex": {
+      "types": "./dist/design-system/components/Flex/Flex.d.ts",
+      "import": "./dist/components/Flex/Flex.js",
+      "require": "./dist/components/Flex/Flex.cjs",
+      "default": "./dist/components/Flex/Flex.js"
+    },
+    "./Icon": {
+      "types": "./dist/design-system/components/Icon/Icon.d.ts",
+      "import": "./dist/components/Icon/Icon.js",
+      "require": "./dist/components/Icon/Icon.cjs",
+      "default": "./dist/components/Icon/Icon.js"
+    },
+    "./ImageAspect": {
+      "types": "./dist/design-system/components/ImageAspect/ImageAspect.d.ts",
+      "import": "./dist/components/ImageAspect/ImageAspect.js",
+      "require": "./dist/components/ImageAspect/ImageAspect.cjs",
+      "default": "./dist/components/ImageAspect/ImageAspect.js"
+    },
+    "./Key": {
+      "types": "./dist/design-system/components/Key/Key.d.ts",
+      "import": "./dist/components/Key/Key.js",
+      "require": "./dist/components/Key/Key.cjs",
+      "default": "./dist/components/Key/Key.js"
+    },
+    "./Menu": {
+      "types": "./dist/design-system/components/Menu/Menu.d.ts",
+      "import": "./dist/components/Menu/Menu.js",
+      "require": "./dist/components/Menu/Menu.cjs",
+      "default": "./dist/components/Menu/Menu.js"
+    },
+    "./MicroCalendar": {
+      "types": "./dist/design-system/components/MicroCalendar/MicroCalendar.d.ts",
+      "import": "./dist/components/MicroCalendar/MicroCalendar.js",
+      "require": "./dist/components/MicroCalendar/MicroCalendar.cjs",
+      "default": "./dist/components/MicroCalendar/MicroCalendar.js"
+    },
+    "./Modal": {
+      "types": "./dist/design-system/components/Modal/Modal.d.ts",
+      "import": "./dist/components/Modal/Modal.js",
+      "require": "./dist/components/Modal/Modal.cjs",
+      "default": "./dist/components/Modal/Modal.js"
+    },
+    "./Pagination": {
+      "types": "./dist/design-system/components/Pagination/Pagination.d.ts",
+      "import": "./dist/components/Pagination/Pagination.js",
+      "require": "./dist/components/Pagination/Pagination.cjs",
+      "default": "./dist/components/Pagination/Pagination.js"
+    },
+    "./PillToggle": {
+      "types": "./dist/design-system/components/PillToggle/PillToggle.d.ts",
+      "import": "./dist/components/PillToggle/PillToggle.js",
+      "require": "./dist/components/PillToggle/PillToggle.cjs",
+      "default": "./dist/components/PillToggle/PillToggle.js"
+    },
+    "./Playground": {
+      "types": "./dist/design-system/components/Playground/Playground.d.ts",
+      "import": "./dist/components/Playground/Playground.js",
+      "require": "./dist/components/Playground/Playground.cjs",
+      "default": "./dist/components/Playground/Playground.js"
+    },
+    "./ProgressCircle": {
+      "types": "./dist/design-system/components/ProgressCircle/ProgressCircle.d.ts",
+      "import": "./dist/components/ProgressCircle/ProgressCircle.js",
+      "require": "./dist/components/ProgressCircle/ProgressCircle.cjs",
+      "default": "./dist/components/ProgressCircle/ProgressCircle.js"
+    },
+    "./ProgressIndicator": {
+      "types": "./dist/design-system/components/ProgressIndicator/ProgressIndicator.d.ts",
+      "import": "./dist/components/ProgressIndicator/ProgressIndicator.js",
+      "require": "./dist/components/ProgressIndicator/ProgressIndicator.cjs",
+      "default": "./dist/components/ProgressIndicator/ProgressIndicator.js"
+    },
+    "./Radio": {
+      "types": "./dist/design-system/components/Radio/Radio.d.ts",
+      "import": "./dist/components/Radio/Radio.js",
+      "require": "./dist/components/Radio/Radio.cjs",
+      "default": "./dist/components/Radio/Radio.js"
+    },
+    "./Slider": {
+      "types": "./dist/design-system/components/Slider/Slider.d.ts",
+      "import": "./dist/components/Slider/Slider.js",
+      "require": "./dist/components/Slider/Slider.cjs",
+      "default": "./dist/components/Slider/Slider.js"
+    },
+    "./Status": {
+      "types": "./dist/design-system/components/Status/Status.d.ts",
+      "import": "./dist/components/Status/Status.js",
+      "require": "./dist/components/Status/Status.cjs",
+      "default": "./dist/components/Status/Status.js"
+    },
+    "./Steps": {
+      "types": "./dist/design-system/components/Steps/Steps.d.ts",
+      "import": "./dist/components/Steps/Steps.js",
+      "require": "./dist/components/Steps/Steps.cjs",
+      "default": "./dist/components/Steps/Steps.js"
+    },
+    "./Table": {
+      "types": "./dist/design-system/components/Table/Table.d.ts",
+      "import": "./dist/components/Table/Table.js",
+      "require": "./dist/components/Table/Table.cjs",
+      "default": "./dist/components/Table/Table.js"
+    },
+    "./Tabs": {
+      "types": "./dist/design-system/components/Tabs/Tabs.d.ts",
+      "import": "./dist/components/Tabs/Tabs.js",
+      "require": "./dist/components/Tabs/Tabs.cjs",
+      "default": "./dist/components/Tabs/Tabs.js"
+    },
+    "./Tag": {
+      "types": "./dist/design-system/components/Tag/Tag.d.ts",
+      "import": "./dist/components/Tag/Tag.js",
+      "require": "./dist/components/Tag/Tag.cjs",
+      "default": "./dist/components/Tag/Tag.js"
+    },
+    "./Text": {
+      "types": "./dist/design-system/components/Text/Text.d.ts",
+      "import": "./dist/components/Text/Text.js",
+      "require": "./dist/components/Text/Text.cjs",
+      "default": "./dist/components/Text/Text.js"
+    },
+    "./Textarea": {
+      "types": "./dist/design-system/components/Textarea/Textarea.d.ts",
+      "import": "./dist/components/Textarea/Textarea.js",
+      "require": "./dist/components/Textarea/Textarea.cjs",
+      "default": "./dist/components/Textarea/Textarea.js"
+    },
+    "./TextInput": {
+      "types": "./dist/design-system/components/TextInput/TextInput.d.ts",
+      "import": "./dist/components/TextInput/TextInput.js",
+      "require": "./dist/components/TextInput/TextInput.cjs",
+      "default": "./dist/components/TextInput/TextInput.js"
+    },
+    "./Toast": {
+      "types": "./dist/design-system/components/Toast/Toast.d.ts",
+      "import": "./dist/components/Toast/Toast.js",
+      "require": "./dist/components/Toast/Toast.cjs",
+      "default": "./dist/components/Toast/Toast.js"
+    },
+    "./Toggle": {
+      "types": "./dist/design-system/components/Toggle/Toggle.d.ts",
+      "import": "./dist/components/Toggle/Toggle.js",
+      "require": "./dist/components/Toggle/Toggle.cjs",
+      "default": "./dist/components/Toggle/Toggle.js"
+    },
+    "./Tooltip": {
+      "types": "./dist/design-system/components/Tooltip/Tooltip.d.ts",
+      "import": "./dist/components/Tooltip/Tooltip.js",
+      "require": "./dist/components/Tooltip/Tooltip.cjs",
+      "default": "./dist/components/Tooltip/Tooltip.js"
+    },
+    "./styles.css": "./dist/style.css",
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens/index.js"
+    },
+    "./tokens/color": {
+      "types": "./dist/tokens/color.d.ts",
+      "import": "./dist/tokens/color.js"
+    },
+    "./tokens/spacing": {
+      "types": "./dist/tokens/spacing.d.ts",
+      "import": "./dist/tokens/spacing.js"
+    },
+    "./tokens/radius": {
+      "types": "./dist/tokens/radius.d.ts",
+      "import": "./dist/tokens/radius.js"
+    },
+    "./tokens/typography": {
+      "types": "./dist/tokens/typography.d.ts",
+      "import": "./dist/tokens/typography.js"
+    },
+    "./tokens/shadow": {
+      "types": "./dist/tokens/shadow.d.ts",
+      "import": "./dist/tokens/shadow.js"
+    },
+    "./tokens/motion": {
+      "types": "./dist/tokens/motion.d.ts",
+      "import": "./dist/tokens/motion.js"
+    },
+    "./tokens.css": "./dist/tokens/tokens.css"
   },
   "files": [
     "dist",
-    "README.md"
-  ],
-  "sideEffects": [
-    "**/*.css",
-    "**/*.scss"
+    "README.md",
+    "LICENSE"
   ],
+  "sideEffects": false,
   "scripts": {
     "dev": "vite --configLoader native",
-    "build": "vite build --configLoader native && npm run build:types",
+    "build": "vite build --configLoader native && npm run build:types && npm run build:tokens",
     "build:types": "tsc -p tsconfig.build.json",
+    "build:tokens": "tsc -p tsconfig.tokens.json && node --experimental-specifier-resolution=node scripts/generate-tokens-css.mjs",
+    "size:check": "node scripts/check-bundle-size.mjs",
+    "ci:bundle": "npm run build && npm run size:check",
     "preview": "vite preview --configLoader native",
     "lint": "eslint .",
     "lint:styles": "stylelint \"src/**/*.scss\"",
@@ -48,8 +368,7 @@
     "sass:watch": "sass --watch src/design-system:src/design-system"
   },
   "dependencies": {
-    "prismjs": "^1.30.0",
-    "prop-types": "^15.8.1"
+    "prismjs": "^1.30.0"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.10",