feat(Text): font weight

.changeset/short-comics-wish.md

@@ -0,0 +1,5 @@
+---
+"reshaped": patch
+---
+
+Text: Added semibold and extrabold weight support

packages/reshaped/src/cli/theming/tailwind.ts

@@ -61,6 +61,15 @@ export const transformToTailwind = (theme?: GeneratedThemeDefinition) => {
 		return;
 	});
 
+	Object.keys(definition.fontWeight).forEach((tokenName) => {
+		const cssTokenName = camelToKebab(tokenName);
+		const cssVariable = ["rs", "font-weight", cssTokenName].join("-");
+		const configValue = `var(--${cssVariable})`;
+
+		variables[`--font-weight-${cssTokenName}`] = configValue;
+		return;
+	});
+
 	Object.keys(definition.unit).forEach((tokenName) => {
 		if (tokenName.startsWith("base")) {
 			[...Array(11).keys()].forEach((i) => {

packages/reshaped/src/components/Accordion/Accordion.types.ts

@@ -1,7 +1,7 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { IconProps } from "@/components/Icon";
-import type React from "react";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type React from "react";
 
 export type BaseProps = {
 	/** Expand / collapse icon size in units */

packages/reshaped/src/components/ActionBar/ActionBar.types.ts

@@ -1,7 +1,7 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { ViewProps } from "@/components/View";
-import type React from "react";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type React from "react";
 
 export type Props = Pick<ViewProps, "paddingBlock" | "paddingInline" | "padding"> & {
 	/** Show or hide the component */

packages/reshaped/src/components/Alert/Alert.types.ts

@@ -1,7 +1,7 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { IconProps } from "@/components/Icon";
-import type React from "react";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type React from "react";
 
 export type Props = {
 	/** SVG component for the icon */

packages/reshaped/src/components/Avatar/Avatar.types.ts

@@ -1,6 +1,6 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { IconProps } from "@/components/Icon";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
 
 export type Props = {
 	/** Image URL */

packages/reshaped/src/components/Badge/Badge.types.ts

@@ -1,6 +1,6 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { ActionableProps } from "@/components/Actionable";
 import type { IconProps } from "@/components/Icon";
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
 
 type BaseProps = {

packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.types.ts

@@ -1,5 +1,5 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { LinkProps } from "@/components/Link";
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
 
 export type Props = {

packages/reshaped/src/components/Button/Button.types.ts

@@ -1,9 +1,9 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { AlignerProps as BaseAlignerProps } from "@/components/_private/Aligner";
 import type { ActionableProps } from "@/components/Actionable";
 import type { IconProps } from "@/components/Icon";
-import type React from "react";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type React from "react";
 
 export type Size = "xlarge" | "large" | "medium" | "small";
 

packages/reshaped/src/components/Carousel/Carousel.types.ts

@@ -1,7 +1,7 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { ActionableRef } from "@/components/Actionable";
-import type React from "react";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type React from "react";
 
 export type Instance =
 	| {

packages/reshaped/src/components/Checkbox/Checkbox.types.ts

@@ -1,6 +1,6 @@
+import type * as G from "@/types/global";
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as G from "@/types/global";
 
 type BaseProps = {
 	/** Node for inserting the label */

packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.types.ts

@@ -1,6 +1,6 @@
 import type { CheckboxProps } from "@/components/Checkbox";
-import type React from "react";
 import type * as G from "@/types/global";
+import type React from "react";
 
 type BaseProps = {
 	/** Component id attribute */

packages/reshaped/src/components/Container/Container.types.ts

@@ -1,7 +1,7 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { ViewProps } from "@/components/View";
-import type React from "react";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type React from "react";
 
 export type Props = Pick<ViewProps, "align" | "justify" | "height" | "maxHeight"> & {
 	/** Component inline padding */

packages/reshaped/src/components/Divider/Divider.types.ts

@@ -1,6 +1,6 @@
+import type * as G from "@/types/global";
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as G from "@/types/global";
 
 export type Props = {
 	/** Change component to take no space, useful for using it as a border in components like Tabs */

packages/reshaped/src/components/FileUpload/FileUpload.types.ts

@@ -1,7 +1,7 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { ViewProps } from "@/components/View";
-import type React from "react";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type React from "react";
 
 export type Props = {
 	/** Name of the input element */

packages/reshaped/src/components/Grid/Grid.types.ts

@@ -1,8 +1,8 @@
+import type * as TStyles from "@/styles/types";
+import type * as G from "@/types/global";
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type { Property } from "csstype";
 import type React from "react";
-import type * as TStyles from "@/styles/types";
-import type * as G from "@/types/global";
 
 export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
 	/** Gap between grid items */

packages/reshaped/src/components/Hidden/Hidden.types.ts

@@ -1,5 +1,5 @@
-import type React from "react";
 import type * as G from "@/types/global";
+import type React from "react";
 
 export type Props = {
 	/** Pick at which viewport sizes to hide the children*/

packages/reshaped/src/components/HiddenInput/HiddenInput.types.ts

@@ -1,7 +1,7 @@
 import React from "react";
 
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
 
 export type Props = {
 	/** Name of the input element */

packages/reshaped/src/components/Icon/Icon.types.ts

@@ -1,6 +1,6 @@
+import type * as G from "@/types/global";
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as G from "@/types/global";
 
 export type Props = {
 	/** Icon svg component or node */

packages/reshaped/src/components/Image/Image.types.ts

@@ -1,7 +1,7 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
-import type React from "react";
 import type * as TStyles from "@/styles/types";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type React from "react";
 
 export type Props = {
 	/** Image URL */

packages/reshaped/src/components/Loader/Loader.types.ts

@@ -1,5 +1,5 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
 
 export type Props = {
 	/** Component size */

packages/reshaped/src/components/MenuItem/MenuItem.types.ts

@@ -1,8 +1,8 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { ActionableProps } from "@/components/Actionable";
 import type { IconProps } from "@/components/Icon";
-import type React from "react";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type React from "react";
 
 export type Size = "small" | "medium" | "large";
 

packages/reshaped/src/components/Modal/Modal.types.ts

@@ -1,7 +1,7 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { OverlayProps, OverlayCloseReason } from "@/components/Overlay";
-import type React from "react";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type React from "react";
 
 export type Context = {
 	id: string;

packages/reshaped/src/components/PinField/PinField.types.ts

@@ -1,5 +1,5 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
 
 export type Size = "small" | "medium" | "large" | "xlarge";
 

packages/reshaped/src/components/Radio/Radio.types.ts

@@ -1,6 +1,6 @@
+import type * as G from "@/types/global";
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as G from "@/types/global";
 
 type BaseProps = {
 	/** Node for inserting children */

packages/reshaped/src/components/RadioGroup/RadioGroup.types.ts

@@ -1,7 +1,7 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { RadioProps } from "@/components/Radio";
-import type React from "react";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type React from "react";
 
 type BaseProps = {
 	/** Unique identifier for the radio group */

packages/reshaped/src/components/Reshaped/Reshaped.types.ts

@@ -1,8 +1,8 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { GlobalColorModeProps, ThemeProps } from "@/components/Theme";
 import type { ToastProviderProps } from "@/components/Toast";
-import type React from "react";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type React from "react";
 
 export type Props = {
 	/** Node for inserting children */

packages/reshaped/src/components/Scrim/Scrim.types.ts

@@ -1,7 +1,7 @@
 import React from "react";
 
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { ViewProps } from "@/components/View";
+import type { Attributes, ClassName } from "@reshaped/headless";
 
 export type Props = {
 	/** Node for inserting content */

packages/reshaped/src/components/ScrollArea/ScrollArea.types.ts

@@ -1,7 +1,7 @@
+import type * as G from "@/types/global";
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type { Coordinates } from "@reshaped/headless/internal";
 import type React from "react";
-import type * as G from "@/types/global";
 
 export type Props = {
 	/** Node for inserting content */

packages/reshaped/src/components/Select/Select.types.ts

@@ -1,11 +1,11 @@
 import React from "react";
 
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { ActionableProps } from "@/components/Actionable";
 import type { DropdownMenuProps } from "@/components/DropdownMenu";
 import type { IconProps } from "@/components/Icon";
 import type { MenuItemProps } from "@/components/MenuItem";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
 
 type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">;
 

packages/reshaped/src/components/Skeleton/Skeleton.types.ts

@@ -1,5 +1,5 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { ViewProps } from "@/components/View";
+import type { Attributes, ClassName } from "@reshaped/headless";
 
 export type Props = Pick<ViewProps, "width" | "height" | "borderRadius"> & {
 	/** Additional classname for the root element */

packages/reshaped/src/components/Stepper/Stepper.types.ts

@@ -1,6 +1,6 @@
+import type * as G from "@/types/global";
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as G from "@/types/global";
 
 export type Props = {
 	/** Id of the item to display as active */

packages/reshaped/src/components/Switch/Switch.types.ts

@@ -1,7 +1,7 @@
 import React from "react";
 
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
 
 type BaseProps = {
 	/** Node for inserting children */

packages/reshaped/src/components/Tabs/Tabs.types.ts

@@ -1,5 +1,5 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { IconProps } from "@/components/Icon";
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
 
 export type SelectionState = {

packages/reshaped/src/components/Text/Text.module.css

@@ -162,9 +162,17 @@
 		font-weight: var(--rs-font-weight-medium) !important;
 	}
 
+	@value semibold {
+		font-weight: var(--rs-font-weight-semibold) !important;
+	}
+
 	@value bold {
 		font-weight: var(--rs-font-weight-bold) !important;
 	}
+
+	@value extrabold {
+		font-weight: var(--rs-font-weight-extrabold) !important;
+	}
 }
 
 @each $color in neutral, neutral-faded, primary, warning, positive, critical, disabled {

packages/reshaped/src/components/Text/Text.types.ts

@@ -1,6 +1,6 @@
+import type * as G from "@/types/global";
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as G from "@/types/global";
 
 export type Variant =
 	| "title-1"
@@ -22,7 +22,7 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = voi
 	/** Text render variant */
 	variant?: G.Responsive<Variant>;
 	/** Text font weight */
-	weight?: G.Responsive<"regular" | "medium" | "bold">;
+	weight?: G.Responsive<"regular" | "medium" | "semibold" | "bold" | "extrabold">;
 	/** Render monospace font */
 	monospace?: boolean;
 	/** Text color, based on the color tokens */

packages/reshaped/src/components/Text/tests/Text.stories.tsx

@@ -77,9 +77,15 @@ export const weight = {
 			<Example.Item title="weight: medium">
 				<Text weight="medium">Medium</Text>
 			</Example.Item>
+			<Example.Item title="weight: semibold">
+				<Text weight="semibold">Semibold</Text>
+			</Example.Item>
 			<Example.Item title="weight: bold">
 				<Text weight="bold">Bold</Text>
 			</Example.Item>
+			<Example.Item title="weight: extrabold">
+				<Text weight="extrabold">Extrabold</Text>
+			</Example.Item>
 			<Example.Item title={["responsive", "[s] weight: regular", "[m+] bold"]}>
 				<Text weight={{ s: "regular", m: "bold" }}>Responsive</Text>
 			</Example.Item>

packages/reshaped/src/components/TextArea/TextArea.types.ts

@@ -1,8 +1,8 @@
 import React from "react";
 
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { FormControlProps } from "@/components/FormControl";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
 
 type Size = G.Responsive<"medium" | "large" | "xlarge">;
 

packages/reshaped/src/components/TextField/TextField.types.ts

@@ -1,8 +1,8 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { FormControlProps } from "@/components/FormControl";
 import type { IconProps } from "@/components/Icon";
-import type React from "react";
 import type * as G from "@/types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type React from "react";
 
 type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">;
 

packages/reshaped/src/components/Toast/Toast.types.ts

@@ -1,5 +1,5 @@
-import type { Attributes, ClassName } from "@reshaped/headless";
 import type { IconProps } from "@/components/Icon";
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
 
 export type Status = "entering" | "entered" | "exited";