Use mixins

packages/components/src/components/Avatar/Avatar.module.scss

@@ -0,0 +1,39 @@
+@use "@/components/Initials/Initials.module.scss" as Initials;
+@import "@/styles";
+
+@mixin size($s) {
+  &.size-#{$s} {
+    --avatar-size: var(--avatar--size--#{$s});
+  }
+}
+
+@mixin root {
+  border-radius: var(--border-radius--round);
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  overflow: hidden;
+
+  > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .initials {
+    @include Initials.root;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: calc(var(--avatar-size) * 0.4);
+  }
+
+  @include size(s);
+  @include size(m);
+  @include size(l);
+}
+
+.root {
+  @include root;
+}

packages/components/src/components/Avatar/Avatar.tsx

@@ -1,5 +1,5 @@
 import React, { FC, PropsWithChildren } from "react";
-import styles from "./Avatar.module.css";
+import styles from "./Avatar.module.scss";
 import clsx from "clsx";
 import { PropsContext, PropsContextProvider } from "@/lib/propsContext";
 
@@ -12,7 +12,7 @@ interface AvatarProps extends PropsWithChildren {
 export const Avatar: FC<AvatarProps> = (props) => {
   const { children, className, size = "s" } = props;
 
-  const rootClassName = clsx(className, styles.root, styles[`size-${size}`]);
+  const rootClassName = clsx(styles.root, className, styles[`size-${size}`]);
 
   const propsContext: PropsContext = {
     Initials: {

packages/components/src/components/Badge/Badge.module.css → packages/components/src/components/Badge/Badge.module.scss

@@ -1,6 +1,6 @@
 @import "@/styles";
 
-.root {
+@mixin root {
   color: var(--badge--color);
   font-size: var(--badge--font-size);
   background-color: var(--badge--info-background-color);
@@ -30,33 +30,36 @@
       display: none;
     }
   }
-}
 
-/* Variants */
+  /* Elements */
 
-.success {
-  background-color: var(--badge--success-background-color);
-}
+  .statusIcon,
+  .customIcon {
+    font-size: var(--badge--icon-size);
+    grid-area: icon;
+  }
 
-.warning {
-  background-color: var(--badge--warning-background-color);
+  .content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    grid-area: content;
+  }
 }
 
-.negative {
-  background-color: var(--badge--negative-background-color);
+.root {
+  @include root;
 }
 
-/* Elements */
+/* Variants */
 
-.statusIcon,
-.customIcon {
-  font-size: var(--badge--icon-size);
-  grid-area: icon;
+@mixin variant($v) {
+  .#{$v} {
+    background-color: var(--badge--#{$v}-background-color);
+  }
 }
 
-.content {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  grid-area: content;
-}
+@include variant(info);
+@include variant(success);
+@include variant(warning);
+@include variant(negative);

packages/components/src/components/Badge/Badge.tsx

@@ -1,5 +1,5 @@
 import React, { FC, PropsWithChildren } from "react";
-import styles from "./Badge.module.css";
+import styles from "./Badge.module.scss";
 import clsx from "clsx";
 import { StatusIcon } from "@/components/StatusIcon";
 import { Text } from "@/components/Text";

packages/components/src/components/Button/Button.module.scss

@@ -0,0 +1,60 @@
+@import "@/styles";
+
+@mixin root {
+  border: none;
+  border-radius: var(--button--border-radius);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: var(--button--padding-y) var(--button--padding-x);
+  font-size: var(--font-size--default);
+  font-weight: bold;
+  transition-property: color, background-color;
+  transition-duration: var(--transition--duration--default);
+
+  &[disabled] {
+    background-color: var(--button--disabled-background-color);
+    color: var(--button--disabled-color);
+  }
+
+  .icon {
+    order: 0;
+  }
+
+  &:has(.icon) {
+    /* Apply line-height when empty */
+    &::after {
+      content: "\200B";
+      visibility: hidden;
+    }
+  }
+
+  .text {
+    order: 1;
+    margin-inline-start: var(--button--icon-to-text-spacing);
+  }
+}
+
+.root {
+  @include root;
+}
+
+@mixin variant($v) {
+  .#{$v} {
+    background-color: var(--button--#{$v}-background-color--default);
+    color: var(--button--#{$v}-color);
+
+    &:hover {
+      background-color: var(--button--#{$v}-background-color--hover);
+    }
+
+    &[data-pressed] {
+      background-color: var(--button--#{$v}-background-color--pressed);
+    }
+  }
+}
+
+@include variant(primary);
+@include variant(accent);
+@include variant(negative);
+@include variant(secondary);

packages/components/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import React, { FC, PropsWithChildren } from "react";
-import styles from "./Button.module.css";
+import styles from "./Button.module.scss";
 import * as Aria from "react-aria-components";
 import clsx from "clsx";
 import {