review fixes

apps/design-system/stories/badge.stories.tsx

@@ -9,9 +9,6 @@ export default {
       control: { type: "select", options: ["neutral", "secondary"] },
     },
     icon: { control: "boolean" },
-    size: {
-      control: { type: "select", options: ["with_icon", "no_icon"] },
-    },
   },
   tags: ["autodocs"],
 } as Meta;
@@ -21,7 +18,6 @@ type Story = StoryObj<typeof Badge>;
 export const Neutral: Story = {
   args: {
     icon: false,
-    size: "no_icon",
     color: "neutral",
     children: "Label",
   },
@@ -30,7 +26,6 @@ export const Neutral: Story = {
 export const Primary: Story = {
   args: {
     icon: true,
-    size: "with_icon",
     color: "neutral",
     children: "Label",
   },
@@ -39,7 +34,6 @@ export const Primary: Story = {
 export const Secondary: Story = {
   args: {
     icon: false,
-    size: "with_icon",
     color: "secondary",
     children: "Label",
   },

package.json

@@ -10,7 +10,6 @@
   "devDependencies": {
     "@repo/eslint-config": "*",
     "@repo/typescript-config": "*",
-    "check-prettier": "^1.0.3",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "turbo": "^2.0.6"

packages/design-system/config/borderRadius.ts

@@ -4,7 +4,7 @@ const borderRadius: Pick<Partial<ThemeConfig>, "borderRadius"> = {
   // !!! We replace the default Tailwind CSS borderRadius scale with our own
   borderRadius: {
     none: "0px",
-    DEFAULT: "1rem",
+    DEFAULT: "0.375rem",
     md: "1.5rem",
     lg: "2rem",
     full: "9999px",

packages/design-system/config/colors.ts

@@ -84,7 +84,7 @@ const backgroundColorSecondary = {
 const textColorSecondary = {
   secondary: secondaryColors[50],
   "secondary-hover": secondaryColors[30],
-  "secondary-strong": secondaryColors[10],
+  "secondary-strong": secondaryColors[30],
 };
 
 const borderColorSecondary = {

packages/design-system/config/typography.ts

@@ -8,6 +8,10 @@ const typography: Pick<
   fontFamily: {
     sans: ['"Radio Canada"', ...defaultTheme.fontFamily.sans],
   },
+  fontSize: {
+    xs: "0.625rem",
+    sm: "0.812rem",
+  },
 };
 
 export default typography;

packages/design-system/src/Badge/BadgeStarIcon.tsx

@@ -1,20 +1,19 @@
 import React from "react";
 
-function BadgeStarIcon() {
+export function BadgeStarIcon(
+  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
+) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="18"
-      height="18"
-      fill="none"
       viewBox="0 0 18 18"
+      fill="none"
+      {...props}
     >
       <path
-        fill="#565252"
+        fill="currentColor"
         d="M9 12.953l4.635 2.797-1.23-5.273L16.5 6.93l-5.393-.457L9 1.5 6.893 6.473 1.5 6.93l4.095 3.547-1.23 5.273L9 12.953z"
       ></path>
     </svg>
   );
 }
-
-export default BadgeStarIcon;

packages/design-system/src/badge.tsx

@@ -1,35 +1,28 @@
 import React from "react";
-import BadgeStarIcon from "./Badge/BadgeStarIcon";
 import { cva } from "class-variance-authority";
+import { BadgeStarIcon } from "./Badge/BadgeStarIcon";
 
 export interface BadgeProps {
   icon?: boolean;
   color?: "neutral" | "secondary";
-  size?: "with_icon" | "no_icon";
   children?: React.ReactNode;
 }
 
 const badge = cva(
   [
-    "k1-flex k1-flex-row k1-rounded-[0.375rem] k1-px-[0.5rem] k1-py-[0.25rem] k1-gap-1 k1-m-0 k1-font-bold k1-uppercase k1-relative k1-inline-block k1-max-w-fit",
+    "k1-inline-flex k1-rounded k1-px-xs k1-py-xxs k1-gap-1 k1-font-bold k1-text-xs k1-font-sans k1-flex-nowrap k1-items-center k1-uppercase k1-leading-4 k1-tracking-wider",
   ],
   {
     variants: {
       color: {
         neutral: ["k1-text-neutral", "k1-bg-neutral"],
-        secondary: ["k1-text-secondary-hover", "k1-bg-secondary"],
+        secondary: ["k1-text-secondary-strong k1-bg-secondary"],
       },
     },
   },
 );
 
-const Badge: React.FC<BadgeProps> = ({
-  icon = false,
-  color,
-  size,
-  children,
-}) => {
-  const showIcon = icon || size === "with_icon";
+const Badge: React.FC<BadgeProps> = ({ icon = false, color, children }) => {
   const neutralVariant = color === "neutral";
 
   return (
@@ -38,16 +31,8 @@ const Badge: React.FC<BadgeProps> = ({
         color: neutralVariant ? "neutral" : "secondary",
       })}
     >
-      {showIcon && (
-        <div className="k1-inline-block k1-items-center">
-          <BadgeStarIcon />
-        </div>
-      )}
-      <div
-        className={`k1-text-[0.625rem] k1-font-bold k1-leading-4 k1-border-hidden k1-outline-none w-[2.125rem] h-[1.125rem] k1-items-center k1-justify-center k1-inline-block k1-tracking-[0.04] k1-align-bottom`}
-      >
-        {children}
-      </div>
+      {icon && <BadgeStarIcon className="k1-w-[18px] k1-h-[18px]" />}
+      <div className="k1-whitespace-nowrap">{children}</div>
     </div>
   );
 };