@luscii-healthtech/web-ui 42.13.0 → 42.13.1

package/dist/stories/PrimitiveColors/PrimitiveColors.d.ts

@@ -0,0 +1 @@
+export declare function PrimitiveColors(): import("react/jsx-runtime").JSX.Element;

package/dist/stories/SemanticColors/SemanticColors.d.ts

@@ -0,0 +1,11 @@
+interface SemanticColorGroupProps {
+    category: "background" | "border" | "text" | "icon";
+    group: string;
+}
+export declare function SemanticColorGroup({ category, group, }: SemanticColorGroupProps): import("react/jsx-runtime").JSX.Element | null;
+interface CategorySectionProps {
+    category: "background" | "border" | "text" | "icon";
+    title: string;
+}
+export declare function CategorySection({ category, title }: CategorySectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/web-ui-tailwind.css

@@ -13,7 +13,6 @@
   --ui-color-orange-400: #fb923c;
   --ui-color-amber-50: #fef8e3;
   --ui-color-amber-100: #fef3c7;
-  --ui-color-amber-400: #fbbf24;
   --ui-color-amber-500: #f59e0b;
   --ui-color-amber-700: #b45309;
   --ui-color-amber-800: #92400e;
@@ -110,9 +109,33 @@
   --ui-spacing-l: 24px;
   --ui-spacing-xl: 32px;
   --ui-spacing-xxl: 32px;
-  --ui-color-secondary-pink-dark: #9d174d;
+  --ui-primitive-color-grey-100: #ffffff;
+  --ui-primitive-color-grey-300: #f5f7fa;
+  --ui-primitive-color-grey-500: #cbd5e1;
+  --ui-primitive-color-grey-700: #7387a4;
+  --ui-primitive-color-grey-800: #3a4657;
+  --ui-primitive-color-grey-900: #162130;
+  --ui-primitive-color-brand-500: #1d4ed8;
+  --ui-primitive-color-brand-700: #1e40af;
+  --ui-primitive-color-brand-900: #112d9c;
+  --ui-primitive-color-pink-700: #c30074;
+  --ui-primitive-color-green-300: #4ade80;
+  --ui-primitive-color-green-500: #388e3c;
+  --ui-primitive-color-green-700: #1b5e20;
+  --ui-primitive-color-blue-100: #f1f5fc;
+  --ui-primitive-color-blue-300: #d7e3fb;
+  --ui-primitive-color-blue-500: #b3cafc;
+  --ui-primitive-color-orange-500: #ffb300;
+  --ui-primitive-color-orange-700: #f0761e;
+  --ui-primitive-color-orange-900: #8a3d00;
+  --ui-primitive-color-red-100: #fee2e2;
+  --ui-primitive-color-red-300: #ffa5a7;
+  --ui-primitive-color-red-500: #ff6266;
+  --ui-primitive-color-red-700: #b91c1c;
+  --ui-primitive-color-red-900: #8d1515;
   --ui-color-on-surface-variant: var(--ui-color-slate-500);
   --ui-color-background: var(--ui-color-slate-50);
+  --ui-color-background-info-secondary-default: var(--ui-primitive-color-blue-100);
   --ui-flyout-menu-content-max-height: 600px;
 }
 *, ::after, ::before, ::backdrop, ::file-selector-button {
@@ -530,9 +553,6 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:my-4 {
   margin-block: calc(var(--ui-spacing) * 4);
 }
-.ui\:my-6 {
-  margin-block: calc(var(--ui-spacing) * 6);
-}
 .ui\:my-8 {
   margin-block: calc(var(--ui-spacing) * 8);
 }
@@ -1139,9 +1159,6 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:w-36 {
   width: 9rem;
 }
-.ui\:w-40 {
-  width: 10rem;
-}
 .ui\:w-46 {
   width: 11.5rem;
 }
@@ -2007,6 +2024,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:border-black {
   border-color: var(--ui-color-black);
 }
+.ui\:border-border-success-primary-default {
+  border-color: var(--ui-primitive-color-green-700);
+}
 .ui\:border-color-border {
   border-color: #ccc;
 }
@@ -2103,15 +2123,23 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:bg-amber-50 {
   background-color: var(--ui-color-amber-50);
 }
-.ui\:bg-amber-400 {
-  background-color: var(--ui-color-amber-400);
-}
 .ui\:bg-amber-500 {
   background-color: var(--ui-color-amber-500);
 }
 .ui\:bg-background {
   background-color: var(--ui-color-slate-50);
 }
+.ui\:bg-background-brand-primary-default {
+  background-color: var(--ui-primitive-color-brand-700);
+}
+.ui\:bg-background-brand-primary-hovered {
+  background-color: var(--ui-primitive-color-brand-500);
+}
+.ui\:bg-background-success-secondary-default {
+  background-color: var(
+    --ui-primitive-color-green-300
+  );
+}
 .ui\:bg-black {
   background-color: var(--ui-color-black);
 }
@@ -2124,9 +2152,6 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:bg-blue-400 {
   background-color: var(--ui-color-blue-400);
 }
-.ui\:bg-blue-800 {
-  background-color: var(--ui-color-blue-800);
-}
 .ui\:bg-color-divider {
   background-color: #eeeeee;
 }
@@ -2199,9 +2224,6 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:bg-red-500 {
   background-color: var(--ui-color-red-500);
 }
-.ui\:bg-red-700 {
-  background-color: var(--ui-color-red-700);
-}
 .ui\:bg-secondary {
   background-color: #F3F4F6;
 }
@@ -2226,9 +2248,6 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:bg-slate-400 {
   background-color: var(--ui-color-slate-400);
 }
-.ui\:bg-slate-500 {
-  background-color: var(--ui-color-slate-500);
-}
 .ui\:bg-slate-800 {
   background-color: var(--ui-color-slate-800);
 }
@@ -2877,7 +2896,16 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
   color: var(--ui-color-slate-800);
 }
 .ui\:text-text-body-active {
-  color: var(--ui-color-secondary-pink-dark);
+  color: var(--ui-primitive-color-pink-700);
+}
+.ui\:text-text-brand-primary-default {
+  color: var(--ui-primitive-color-brand-700);
+}
+.ui\:text-text-brand-secondary-default {
+  color: var(--ui-primitive-color-brand-500);
+}
+.ui\:text-text-error-primary-default {
+  color: var(--ui-primitive-color-red-900);
 }
 .ui\:text-transparent {
   color: transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luscii-healthtech/web-ui",
-  "version": "42.13.0",
+  "version": "42.13.1",
   "license": "MIT",
   "author": {
     "name": "Joris Janssen"
@@ -14,7 +14,7 @@
   ],
   "scripts": {
     "start": "yarn build --watch",
-    "dev": "concurrently --names 'STORYBOOK,TAILWIND' -c 'auto' 'yarn storybook:lazy' 'yarn storybook:watch-tailwind --watch'",
+    "dev": "yarn generate:colors && concurrently --names 'STORYBOOK,TAILWIND' -c 'auto' 'yarn storybook:lazy' 'yarn storybook:watch-tailwind --watch'",
     "build": "yarn build:js && yarn build:css",
     "build:js": "yarn rollup --config rollup.config.mjs && yarn fix-alias-paths",
     "build:css": "yarn build-tailwind",
@@ -25,8 +25,8 @@
     "lint:fix": "eslint src stories --ext .jsx --ext .js --ext .ts --ext .tsx --fix",
     "lint:types": "yarn tsc --noEmit",
     "storybook:lazy": "STORYBOOK_LAZY_COMPILATION=true yarn storybook",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "yarn storybook:build-tailwind && storybook build",
+    "storybook": "yarn generate:colors && storybook dev -p 6006",
+    "build-storybook": "yarn generate:colors && yarn storybook:build-tailwind && storybook build",
     "test-storybook": "test-storybook --coverage && yarn create-coverage-report",
     "//_": "Open the coverage report and click through the component names and files to reveal visually which lines aren't covered.",
     "open-coverage-report": "open coverage/storybook/lcov-report/index.html",
@@ -35,7 +35,7 @@
     "test-storybook:ci": "yarn test-storybook --maxWorkers=2",
     "chromatic": "chromatic --exit-zero-on-changes --only-changed",
     "build-tailwind": "NODE_ENV=production npx tailwindcss -i tailwind.css -o ./dist/web-ui-tailwind.css",
-    "storybook:build-tailwind": "npx tailwindcss -i tailwind.css -o ./.storybook/storybook-tailwind.css",
+    "storybook:build-tailwind": "npx tailwindcss -i tailwind.storybook.css -o ./.storybook/storybook-tailwind.css",
     "storybook:watch-tailwind": "yarn storybook:build-tailwind -w",
     "copy-build": "cp -a ./dist/. ../cVitals-Web/node_modules/@luscii-healthtech/web-ui/dist",
     "test-copy-build": "yarn build && yarn copy-build",
@@ -45,7 +45,8 @@
     "icons:regular:verify": "node ./scripts/verify-regular-icons.mjs",
     "//__": "Special icons are icons that are not part of the regular icon set, meaning they either have a different size or cannot take any color.",
     "icons:special": "rimraf src/components/Icons/special-icons/*Icon.tsx && yarn svgr src/components/Icons/special-icons/source-files --no-prettier --config-file svgr.special-icons.config.js && prettier src/components/Icons/special-icons/*.{ts,tsx} --no-config --write",
-    "icons": "yarn icons:special && yarn icons:regular"
+    "icons": "yarn icons:special && yarn icons:regular",
+    "generate:colors": "node ./scripts/generate-color-swatches.mjs"
   },
   "peerDependencies": {
     "@dnd-kit/core": "^6.3.1",