@luscii-healthtech/web-ui 42.13.0 → 42.13.2

package/dist/src/components/RangeCoverage/RangeCoverage.d.ts

@@ -33,12 +33,20 @@ export interface Props {
          */
         color: Color;
     }>;
+    translations: {
+        /**
+         * This component doesn't support overlapping sections. If you cannot guarantee that
+         * sections won't overlap, you can show this message to the user when the component
+         * detects overlapping sections.
+         */
+        sectionOverlapsMessage: string;
+    };
 }
-export declare const COLOR_RED = "var(--ui-color-red-800)";
-export declare const COLOR_AMBER = "var(--ui-color-amber-700)";
-export declare const COLOR_GREY_DARK = "var(--ui-color-slate-700)";
-export declare const COLOR_GREY_LIGHT = "var(--ui-color-slate-300)";
-export declare const COLOR_BLUE = "var(--ui-color-blue-200)";
+export declare const COLOR_GREY_LIGHT = "var(--ui-color-background-info-secondary-hovered)";
+export declare const COLOR_GREY_DARK = "var(--ui-color-border-info-secondary-hovered)";
+export declare const COLOR_RED = "var(--ui-color-border-error-primary-default)";
+export declare const COLOR_AMBER = "var(--ui-color-icon-warning-secondary-default)";
+export declare const COLOR_BLUE = "var(--ui-color-background-info-secondary-hovered)";
 export declare const RangeCoverage: FC<Props> & {
     Colors: {
         RED: string;

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

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

package/dist/stories/RangeCoverage.stories.d.ts

@@ -22,3 +22,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
 export declare const Reversed: Story;
 export declare const EdgeCases: Story;
+export declare const OverlappingSections: Story;

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,40 @@
   --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-blue-700: #7c9eea;
+  --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-color-background-info-secondary-hovered: var(--ui-primitive-color-blue-300);
+  --ui-color-border-neutral-secondary-default: var(--ui-primitive-color-grey-500);
+  --ui-color-border-info-secondary-hovered: var(--ui-primitive-color-blue-700);
+  --ui-color-border-error-primary-default: var(--ui-primitive-color-red-700);
+  --ui-color-text-neutral-secondary-default: var(--ui-primitive-color-grey-800);
+  --ui-color-icon-warning-secondary-default: var(--ui-primitive-color-orange-500);
   --ui-flyout-menu-content-max-height: 600px;
 }
 *, ::after, ::before, ::backdrop, ::file-selector-button {
@@ -530,9 +560,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 +1166,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 +2031,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 +2130,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 +2159,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 +2231,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 +2255,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 +2903,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;