@syscore/ui-library 1.11.2 → 1.13.0

package/client/global.css

@@ -662,13 +662,13 @@ layer(base);
   --color-beige-50: #fdfcfc;
   --color-beige-100: #fbfaf9;
   --color-beige-200: #efeae6;
-  --color-beige-300: #e2d7d0;
-  --color-beige-400: #d2c2b6;
-  --color-beige-500: #c1aa9a;
-  --color-beige-600: #b59a87;
-  --color-beige-700: #a5856e;
-  --color-beige-800: #8b6c56;
-  --color-beige-900: #685140;
+  --color-beige-300: #e3dbd6;
+  --color-beige-400: #d3cac4;
+  --color-beige-500: #c1b6af;
+  --color-beige-600: #b4a9a1;
+  --color-beige-700: #a79a92;
+  --color-beige-800: #8e837b;
+  --color-beige-900: #716962;
 
   --color-mind: #0a5161;
   --color-community: #0f748a;
@@ -1492,7 +1492,7 @@ body {
   align-items: center;
   border-radius: 9999px;
   border: 2px solid transparent;
-  transition: background-color 0.15s ease-in-out;
+  transition: border-color 0.15s ease-in-out;
 }
 
 .switch:focus-visible {
@@ -1508,11 +1508,11 @@ body {
 }
 
 .switch[data-state="checked"] {
-  background-color: hsl(var(--primary));
+  border: 1px solid var(--color-cyan-300, #39c9ea);
 }
 
 .switch[data-state="unchecked"] {
-  background-color: hsl(var(--input));
+  border: 1px solid var(--color-gray-100, #dedfe3);
 }
 
 .switch-thumb {
@@ -1521,19 +1521,18 @@ body {
   height: 1.25rem;
   width: 1.25rem;
   border-radius: 9999px;
-  background-color: hsl(var(--background));
-  box-shadow:
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -4px rgba(0, 0, 0, 0.1);
   transition: transform 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out;
 }
 
 .switch-thumb[data-state="checked"] {
   transform: translateX(1.25rem);
+  background-color: var(--color-cyan-700, #128ba6);
 }
 
 .switch-thumb[data-state="unchecked"] {
   transform: translateX(0);
+  background-color: var(--color-gray-400, #9fa2ab);
 }
 
 /* Checkbox Styles */

package/client/ui/Icons.stories.tsx

@@ -29,29 +29,51 @@ import { UtilitySearch } from "../components/icons/UtilitySearch";
 import { UtilitySort } from "../components/icons/UtilitySort";
 import { UtilityText } from "../components/icons/UtilityText";
 import { UtilityTriangleInfo } from "../components/icons/UtilityTriangleInfo";
-import { SealWell } from "../components/icons/SealWell";
-import { SealIwbiMember } from "../components/icons/SealIwbiMember";
-import { SealWellCertification } from "../components/icons/SealWellCertification";
-import { SealWellCommunity } from "../components/icons/SealWellCommunity";
-import { SealWellResidence } from "../components/icons/SealWellResidence";
-import { SealWorksWithWell } from "../components/icons/SealWorksWithWell";
-import { SealEnterpriseProvider } from "../components/icons/ProviderSeals";
-import { SealPerformanceTestingProvider } from "../components/icons/ProviderSeals";
-import { SealSurveyProvider } from "../components/icons/ProviderSeals";
+import {
+  IWBILogo,
+  SealWell,
+  SealIwbiMember,
+  SealWellCertification,
+  SealWellCommunity,
+  SealWellResidence,
+  SealWorksWithWell,
+} from "../components/icons/seals";
+import {
+  SealEnterpriseProvider,
+  SealPerformanceTestingProvider,
+  SealSurveyProvider,
+} from "../components/icons/provider-seals";
 import {
   BadgeEnterpriseProvider,
   BadgePerformanceTestingProvider,
   BadgeProductProvider,
   BadgeSurveyProvider,
-} from "../components/icons/ProviderBadges";
-import { WatermarkMemberOrg } from "../components/icons/WatermarkMemberOrg";
-import { WaterMarkWWWProducts } from "../components/icons/WaterMarkWWWProducts";
-import { WaterMarkWellProjects } from "../components/icons/WaterMarkWellProjects";
+} from "../components/icons/provider-badges";
+import {
+  WatermarkMemberOrg,
+  WaterMarkWWWProducts,
+  WaterMarkWellProjects,
+} from "../components/icons/watermarks";
 import {
   SealProductProvider,
   SealProviders,
-} from "../components/icons/ProviderSeals";
+} from "../components/icons/provider-seals";
 import { UtilityTrash } from "@/components/icons/UtilityTrash";
+import {
+  BadgeCertificationBronze,
+  BadgeCertificationSilver,
+  BadgeCertificationGold,
+  BadgeCertificationPlatinum,
+  BadgeRatingHealthySafety,
+  BadgeRatingOperations,
+  BadgeRatingPerformance,
+  BadgeRatingEquity,
+  BadgeRatingCoworking,
+  BadgeRatingWorkforce,
+  BadgeRatingDesign,
+  BadgeRatingRealEstate,
+  BadgeRatingResidential,
+} from "../components/icons/achievement-badges";
 
 const meta = {
   title: "Review/Icons",
@@ -281,13 +303,14 @@ export const UtilityIcons: Story = {
   ),
 };
 
-export const MarkIcons: Story = {
+export const Seals: Story = {
   render: () => (
     <div className="space-y-8 p-8 bg-cyan-50">
       <div>
-        <h2 className="text-2xl font-bold mb-6">Mark Icons</h2>
+        <h2 className="text-2xl font-bold mb-6">Seals</h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div className="flex flex-col items-center gap-4">
+            <IWBILogo />
             <SealWell />
             <SealIwbiMember />
             <SealWellCertification />
@@ -341,3 +364,69 @@ export const ProviderSeals: Story = {
     </div>
   ),
 };
+
+export const AchievementBadges: Story = {
+  render: () => (
+    <div className="space-y-8 p-8">
+      <h2 className="text-2xl font-bold mb-6">Achievement Badges</h2>
+      <h3 className="text-lg font-semibold mb-4">Certification</h3>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Bronze</span>
+          <BadgeCertificationBronze />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Silver</span>
+          <BadgeCertificationSilver />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Gold</span>
+          <BadgeCertificationGold />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Platinum</span>
+          <BadgeCertificationPlatinum />
+        </div>
+      </div>
+      <h3 className="text-lg font-semibold mb-4">Rating</h3>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Healthy Safety</span>
+          <BadgeRatingHealthySafety />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Operations</span>
+          <BadgeRatingOperations />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Performance</span>
+          <BadgeRatingPerformance />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Equity</span>
+          <BadgeRatingEquity />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Coworking</span>
+          <BadgeRatingCoworking />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Workforce</span>
+          <BadgeRatingWorkforce />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Design</span>
+          <BadgeRatingDesign />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Real Estate</span>
+          <BadgeRatingRealEstate />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Residential</span>
+          <BadgeRatingResidential />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/client/ui/PageHeader.stories.tsx

@@ -7,7 +7,7 @@ import {
   PageHeaderTitle,
   PageHeaderDescription,
 } from "../components/ui/page-header";
-import { BadgeCertificationBronze } from "../components/icons/AchievementBadges";
+import { BadgeCertificationBronze } from "../components/icons/achievement-badges";
 import { Tag } from "../components/ui/tag";
 import {
   Tooltip,