@@ -154,7 +152,6 @@ export default function CommunitiesPage() {
placeholder="Search communities..."
clearValue={() => setSearchValue("")}
leftIcon={
@@ -168,7 +165,7 @@ export default function CommunitiesPage() {
id="communitiesSortBy"
/>
-
-
+
Thunderstore Mod Manager
-
+
@@ -183,9 +179,13 @@ export function Footer() {
diff --git a/packages/cyberstorm/src/index.ts b/packages/cyberstorm/src/index.ts
index 81239c957..546758331 100644
--- a/packages/cyberstorm/src/index.ts
+++ b/packages/cyberstorm/src/index.ts
@@ -101,13 +101,7 @@ export {
Input,
type InputTextInputProps,
} from "./primitiveComponents/Input/Input";
-export {
- type variants,
- type colors,
- type sizes,
- type TextStyles,
- type PrimitiveComponentDefaultProps,
-} from "./primitiveComponents/utils/utils";
+export { type PrimitiveComponentDefaultProps } from "./primitiveComponents/utils/utils";
// newComponents
export { Menu } from "./newComponents/Menu/Menu";
@@ -118,7 +112,6 @@ export { Link as NewLink } from "./newComponents/Link/Link/Link";
export { LinkButton } from "./newComponents/Link/LinkButton/LinkButton";
export { Button as NewButton } from "./newComponents/Button/Button";
export { BreadCrumbs as NewBreadCrumbs } from "./newComponents/BreadCrumbs/BreadCrumbs";
-export { Container } from "./newComponents/Container/Container";
export { TextInput as NewTextInput } from "./newComponents/TextInput/TextInput";
export { Text as NewText } from "./newComponents/Text/Text";
export {
diff --git a/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.tsx b/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.tsx
index e7cf2f178..7120e3902 100644
--- a/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.tsx
+++ b/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.tsx
@@ -1,7 +1,8 @@
import styles from "./AdContainer.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHeart } from "@fortawesome/free-solid-svg-icons";
-import { Container, NewIcon } from "../..";
+import { NewIcon } from "../..";
+import { classnames } from "../../utils/utils";
interface AdContainerProps {
containerId: string;
@@ -11,12 +12,13 @@ export function AdContainer(props: AdContainerProps) {
const { containerId } = props;
return (
-
+
+
);
}
diff --git a/packages/cyberstorm/src/newComponents/Button/Button.css b/packages/cyberstorm/src/newComponents/Button/Button.css
new file mode 100644
index 000000000..1388dc44a
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Button/Button.css
@@ -0,0 +1,24 @@
+.ts-button {
+ display: flex;
+ flex: none;
+ flex-direction: row;
+ gap: var(--button-gap);
+ align-items: center;
+
+ height: var(--button-height);
+
+ padding: var(--button-padding);
+
+ border: var(--button-border);
+ border-color: var(--button-border-color);
+ border-radius: var(--button-border-radius);
+ color: var(--button-text-color);
+
+ font-weight: var(--button-font-weight);
+ font-size: var(--button-font-size);
+ line-height: var(--button-line-height);
+
+ text-align: center;
+ background-color: var(--button-background-color);
+ user-select: none;
+}
diff --git a/packages/cyberstorm/src/newComponents/Button/Button.tsx b/packages/cyberstorm/src/newComponents/Button/Button.tsx
index 007f60748..08b185b1b 100644
--- a/packages/cyberstorm/src/newComponents/Button/Button.tsx
+++ b/packages/cyberstorm/src/newComponents/Button/Button.tsx
@@ -1,7 +1,7 @@
-import buttonStyles from "../../sharedComponentStyles/ButtonStyles/Button.module.css";
-import iconButtonStyles from "../../sharedComponentStyles/ButtonStyles/IconButton.module.css";
+import "./Button.css";
+import "./IconButton.css";
import React from "react";
-import { classnames } from "../../utils/utils";
+import { classnames, componentClasses } from "../../utils/utils";
import {
ActionableButtonProps,
Actionable,
@@ -9,34 +9,26 @@ import {
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { NewIcon } from "../..";
+import {
+ ButtonVariants,
+ ButtonSizes,
+ ButtonModifiers,
+ IconButtonVariants,
+ IconButtonModifiers,
+ IconButtonSizes,
+} from "@thunderstore/cyberstorm-theme/src/components";
interface ButtonProps extends Omit
You are prepared. Download Thunderstore Mod Manager for
desktop and enter a world of Thunder{" "}
-
+
-
News
-
-
+
© 2024 Thunderstore and contributors. This page is{" "}
open-source ❤
-
+
Thunderstore development is made possible with ads. Please consider
@@ -31,8 +33,8 @@ export function AdContainer(props: AdContainerProps) {
-
+
{community.name}
-
-
+
-
-
- {formatInteger(community.total_package_count)}
-
-
+
+
+ {formatInteger(community.total_package_count)}
+
+
+
{isPopular ? (
@@ -45,7 +44,7 @@ export function CardCommunity(props: Props) {
New
) : null}
-
+
+
+
+ {formatInteger(community.total_download_count)}
+
+
+
+
-
@@ -174,17 +144,7 @@ export const Frame = React.forwardRef<
const fProps = forwardedProps as FrameListItemProps;
return (
-
+
{children}
@@ -192,118 +152,43 @@ export const Frame = React.forwardRef<
}
if (primitiveType === "heading" || primitiveType == "display") {
const fRef = forwardedRef as React.ForwardedRef;
- const { csLevel, csStyleLevel, ...strippedForwardedProps } =
- forwardedProps as FrameHeadingProps | FrameDisplayProps;
- const primitiveStyles =
- primitiveType === "heading"
- ? headingStyles.heading
- : displayStyles.display;
+ const { csLevel, ...strippedForwardedProps } = forwardedProps as
+ | FrameHeadingProps
+ | FrameDisplayProps;
let element;
if (csLevel === "1") {
element = (
-
+
{children}
@@ -153,17 +133,7 @@ export const Frame = React.forwardRef<
const fProps = forwardedProps as FrameListProps;
return (
-
+
-
{children}
+
{children}
);
} else if (csLevel === "2") {
element = (
-
+
{children}
);
} else if (csLevel === "3") {
element = (
-
+
{children}
);
} else if (csLevel === "4") {
element = (
-
+
{children}
);
} else if (csLevel === "5") {
element = (
-
+
{children}
);
} else if (csLevel === "6") {
element = (
-
+
{children}
);
@@ -319,17 +204,7 @@ export const Frame = React.forwardRef<
const textProps = forwardedProps as FrameTextProps;
return (
-
+
{children}
@@ -350,14 +225,7 @@ export const Frame = React.forwardRef<
{...strippedForwardedProps}
id={popoverId}
{...{ popover: popoverMode }}
- className={classnames(
- ...(csTextStyles ? csTextStyles : []),
- popooverStyles.popover,
- rootClasses
- )}
- data-color={csColor}
- data-variant={csVariant}
- data-size={csSize}
+ className={rootClasses}
ref={fRef}
>
{noWrapper ? (
@@ -383,13 +251,7 @@ export const Frame = React.forwardRef<
{...strippedForwardedProps}
id={popoverId}
{...{ popover: "auto" }}
- className={classnames(
- ...(csTextStyles ? csTextStyles : []),
- modalStyles.modal
- )}
- data-color={csColor}
- data-variant={csVariant}
- data-size={csSize}
+ className={rootClasses}
ref={fRef}
>
{noWrapper ? (
@@ -425,13 +287,9 @@ export const Frame = React.forwardRef<
child.props.className,
iconStyles.icon,
noWrapper && csMode === "inline" ? iconStyles.inline : null,
- ...(csTextStyles ? csTextStyles : []),
rootClasses
),
ref: noWrapper ? svgIconRef : null,
- "data-color": csColor ? csColor : null,
- "data-variant": csVariant ? csVariant : null,
- "data-size": csSize ? csSize : null,
...svgFProps,
})
);
@@ -448,12 +306,8 @@ export const Frame = React.forwardRef<
className={classnames(
iconStyles.iconWrapper,
iconStyles.inline,
- wrapperClasses,
- ...(csTextStyles ? csTextStyles : [])
+ wrapperClasses
)}
- data-color={csColor}
- data-variant={csVariant}
- data-size={csSize}
ref={spanIconRef}
>
{clones}
@@ -464,14 +318,7 @@ export const Frame = React.forwardRef<
content = (
{clones}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css
deleted file mode 100644
index c2879194d..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.heading {
- font-weight: 700;
- font-family: inter, sans-serif;
- font-style: normal;
- line-height: normal;
-}
-
-.heading[data-stylelevel="1"] {
- font-weight: var(--font-weight-heavy);
- font-size: var(--space--54);
- font-family: Hubot-Sans, sans-serif;
- line-height: 115%; /* 62.1px */
-}
-
-.heading[data-stylelevel="2"] {
- font-size: var(--space--32);
- line-height: 140%; /* 44.8px */
-}
-
-.heading[data-stylelevel="3"] {
- font-size: var(--space--20);
-}
-
-.heading[data-stylelevel="4"] {
- font-size: var(--space--16);
-}
-
-.heading[data-stylelevel="5"] {
- font-size: var(--space--14);
-}
-
-.heading[data-stylelevel="6"] {
- font-size: var(--space--12);
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Modal.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Modal.module.css
deleted file mode 100644
index 153dadbb9..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Modal.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.modal {
- width: 100%;
- height: 100%;
- background: rgba(0 0 0 / 0.6);
- backdrop-filter: blur(10px);
-}
-
-.modal[data-size="s"] {
- --frame-modal-gap: 1rem;
- --frame-modal-padding: 1.5rem 2.25rem;
- --frame-modal-border-radius: 0.25rem;
-}
-
-.modal[data-size="m"] {
- --frame-modal-gap: 2rem;
- --frame-modal-padding: 3rem 5.5rem;
- --frame-modal-border-radius: 0.5rem;
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Popover.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Popover.module.css
deleted file mode 100644
index f53e14f40..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Popover.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.popover[data-size="s"] {
- --frame-popover-gap: 1rem;
- --frame-popover-padding: 1.5rem 2.25rem;
- --frame-popover-border-radius: 0.25rem;
-}
-
-.popover[data-size="m"] {
- --frame-popover-gap: 2rem;
- --frame-popover-padding: 3rem 5.5rem;
- --frame-popover-border-radius: 0.5rem;
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx b/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx
index 9228ff19f..405416062 100644
--- a/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx
+++ b/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx
@@ -1,6 +1,5 @@
import React from "react";
import { PrimitiveComponentDefaultProps, TooltipWrapper } from "../utils/utils";
-import { classnames } from "../../utils/utils";
export interface InputTextInputProps
extends React.InputHTMLAttributes,
@@ -14,10 +13,6 @@ export const Input = React.forwardRef(
children,
primitiveType,
rootClasses,
- csTextStyles,
- csColor,
- csVariant,
- csSize,
tooltipText,
tooltipSide,
...forwardedProps
@@ -29,17 +24,7 @@ export const Input = React.forwardRef(
return (
-
+
{children}
diff --git a/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx b/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx
index 9a8369b40..4a4c5bcf4 100644
--- a/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx
+++ b/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx
@@ -1,69 +1,6 @@
import { PropsWithChildren } from "react";
import { Tooltip } from "../..";
-// TODO: It would be nice if we forced storybook generation of all of the possible combinations.
-// If we do that, we'll have to handle the "unsupported combinations" gracefully somehow.
-// Best would be if we could have typescript warnings and force each "non-supported combination" to be explicitly
-// unsupported. See NewButtons story in storybook for reference
-
-export type variants =
- | "default"
- | "defaultPeek"
- | "primary"
- | "secondary"
- | "tertiary"
- | "tertiaryDimmed"
- | "minimal"
- | "accent"
- | "special";
-
-export type colors =
- | "surface"
- | "surface-alpha"
- | "blue"
- | "pink"
- | "red"
- | "orange"
- | "green"
- | "yellow"
- | "purple"
- | "cyber-green";
-export const colorsList = [
- "surface",
- "surface-alpha",
- "blue",
- "pink",
- "red",
- "orange",
- "green",
- "yellow",
- "purple",
- "cyber-green",
-] as const;
-
-export type sizes = "xxs" | "xs" | "s" | "m" | "l";
-
-export const textStyleOptions = [
- "lineHeightAuto",
- "lineHeightBody",
- "fontSizeXXS",
- "fontSizeXS",
- "fontSizeS",
- "fontSizeM",
- "fontSizeL",
- "fontWeightRegular",
- "fontWeightMedium",
- "fontWeightSemiBold",
- "fontWeightBold",
- "fontFamilyInter",
- "fontFamilyHubot",
-] as const;
-
-// There is an issue with Typescript (eslint) and prettier disagreeing if
-// the type should have parentheses
-// prettier-ignore
-export type TextStyles = (typeof textStyleOptions)[number];
-
interface TooltipWrapperProps extends PropsWithChildren {
tooltipText?: string;
tooltipSide?: "bottom" | "left" | "right" | "top";
@@ -72,10 +9,6 @@ interface TooltipWrapperProps extends PropsWithChildren {
export interface PrimitiveComponentDefaultProps
extends PropsWithChildren,
TooltipWrapperProps {
- csColor?: colors;
- csVariant?: variants;
- csSize?: sizes;
- csTextStyles?: TextStyles[];
rootClasses?: string;
}
diff --git a/packages/cyberstorm/src/utils/utils.ts b/packages/cyberstorm/src/utils/utils.ts
index 5d832ab40..d7e0b297f 100644
--- a/packages/cyberstorm/src/utils/utils.ts
+++ b/packages/cyberstorm/src/utils/utils.ts
@@ -35,3 +35,12 @@ export const classnames = (
): string => {
return classnames.filter(String).join(" ");
};
+
+export const componentClasses = (
+ variant: string,
+ size: string,
+ modifiers?: string[]
+): string[] => {
+ const asd = modifiers ? modifiers?.map((csm) => `ts-modifier--${csm}`) : [];
+ return [`ts-variant--${variant}`, `ts-size--${size}`, ...asd];
+};
{children}
); } else if (csLevel === "3") { element = ( -
+
{children}
);
} else if (csLevel === "4") {
element = (
-
+
{children}
);
} else if (csLevel === "5") {
element = (
-
+
{children}
);
} else if (csLevel === "6") {
element = (
-
+
{children}
);
@@ -319,17 +204,7 @@ export const Frame = React.forwardRef<
const textProps = forwardedProps as FrameTextProps;
return (
-
+
{children}
@@ -350,14 +225,7 @@ export const Frame = React.forwardRef<
{...strippedForwardedProps}
id={popoverId}
{...{ popover: popoverMode }}
- className={classnames(
- ...(csTextStyles ? csTextStyles : []),
- popooverStyles.popover,
- rootClasses
- )}
- data-color={csColor}
- data-variant={csVariant}
- data-size={csSize}
+ className={rootClasses}
ref={fRef}
>
{noWrapper ? (
@@ -383,13 +251,7 @@ export const Frame = React.forwardRef<
{...strippedForwardedProps}
id={popoverId}
{...{ popover: "auto" }}
- className={classnames(
- ...(csTextStyles ? csTextStyles : []),
- modalStyles.modal
- )}
- data-color={csColor}
- data-variant={csVariant}
- data-size={csSize}
+ className={rootClasses}
ref={fRef}
>
{noWrapper ? (
@@ -425,13 +287,9 @@ export const Frame = React.forwardRef<
child.props.className,
iconStyles.icon,
noWrapper && csMode === "inline" ? iconStyles.inline : null,
- ...(csTextStyles ? csTextStyles : []),
rootClasses
),
ref: noWrapper ? svgIconRef : null,
- "data-color": csColor ? csColor : null,
- "data-variant": csVariant ? csVariant : null,
- "data-size": csSize ? csSize : null,
...svgFProps,
})
);
@@ -448,12 +306,8 @@ export const Frame = React.forwardRef<
className={classnames(
iconStyles.iconWrapper,
iconStyles.inline,
- wrapperClasses,
- ...(csTextStyles ? csTextStyles : [])
+ wrapperClasses
)}
- data-color={csColor}
- data-variant={csVariant}
- data-size={csSize}
ref={spanIconRef}
>
{clones}
@@ -464,14 +318,7 @@ export const Frame = React.forwardRef<
content = (
{clones}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css
deleted file mode 100644
index c2879194d..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.heading {
- font-weight: 700;
- font-family: inter, sans-serif;
- font-style: normal;
- line-height: normal;
-}
-
-.heading[data-stylelevel="1"] {
- font-weight: var(--font-weight-heavy);
- font-size: var(--space--54);
- font-family: Hubot-Sans, sans-serif;
- line-height: 115%; /* 62.1px */
-}
-
-.heading[data-stylelevel="2"] {
- font-size: var(--space--32);
- line-height: 140%; /* 44.8px */
-}
-
-.heading[data-stylelevel="3"] {
- font-size: var(--space--20);
-}
-
-.heading[data-stylelevel="4"] {
- font-size: var(--space--16);
-}
-
-.heading[data-stylelevel="5"] {
- font-size: var(--space--14);
-}
-
-.heading[data-stylelevel="6"] {
- font-size: var(--space--12);
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Modal.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Modal.module.css
deleted file mode 100644
index 153dadbb9..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Modal.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.modal {
- width: 100%;
- height: 100%;
- background: rgba(0 0 0 / 0.6);
- backdrop-filter: blur(10px);
-}
-
-.modal[data-size="s"] {
- --frame-modal-gap: 1rem;
- --frame-modal-padding: 1.5rem 2.25rem;
- --frame-modal-border-radius: 0.25rem;
-}
-
-.modal[data-size="m"] {
- --frame-modal-gap: 2rem;
- --frame-modal-padding: 3rem 5.5rem;
- --frame-modal-border-radius: 0.5rem;
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Popover.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Popover.module.css
deleted file mode 100644
index f53e14f40..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Popover.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.popover[data-size="s"] {
- --frame-popover-gap: 1rem;
- --frame-popover-padding: 1.5rem 2.25rem;
- --frame-popover-border-radius: 0.25rem;
-}
-
-.popover[data-size="m"] {
- --frame-popover-gap: 2rem;
- --frame-popover-padding: 3rem 5.5rem;
- --frame-popover-border-radius: 0.5rem;
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx b/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx
index 9228ff19f..405416062 100644
--- a/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx
+++ b/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx
@@ -1,6 +1,5 @@
import React from "react";
import { PrimitiveComponentDefaultProps, TooltipWrapper } from "../utils/utils";
-import { classnames } from "../../utils/utils";
export interface InputTextInputProps
extends React.InputHTMLAttributes,
@@ -14,10 +13,6 @@ export const Input = React.forwardRef(
children,
primitiveType,
rootClasses,
- csTextStyles,
- csColor,
- csVariant,
- csSize,
tooltipText,
tooltipSide,
...forwardedProps
@@ -29,17 +24,7 @@ export const Input = React.forwardRef(
return (
-
+
{children}
diff --git a/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx b/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx
index 9a8369b40..4a4c5bcf4 100644
--- a/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx
+++ b/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx
@@ -1,69 +1,6 @@
import { PropsWithChildren } from "react";
import { Tooltip } from "../..";
-// TODO: It would be nice if we forced storybook generation of all of the possible combinations.
-// If we do that, we'll have to handle the "unsupported combinations" gracefully somehow.
-// Best would be if we could have typescript warnings and force each "non-supported combination" to be explicitly
-// unsupported. See NewButtons story in storybook for reference
-
-export type variants =
- | "default"
- | "defaultPeek"
- | "primary"
- | "secondary"
- | "tertiary"
- | "tertiaryDimmed"
- | "minimal"
- | "accent"
- | "special";
-
-export type colors =
- | "surface"
- | "surface-alpha"
- | "blue"
- | "pink"
- | "red"
- | "orange"
- | "green"
- | "yellow"
- | "purple"
- | "cyber-green";
-export const colorsList = [
- "surface",
- "surface-alpha",
- "blue",
- "pink",
- "red",
- "orange",
- "green",
- "yellow",
- "purple",
- "cyber-green",
-] as const;
-
-export type sizes = "xxs" | "xs" | "s" | "m" | "l";
-
-export const textStyleOptions = [
- "lineHeightAuto",
- "lineHeightBody",
- "fontSizeXXS",
- "fontSizeXS",
- "fontSizeS",
- "fontSizeM",
- "fontSizeL",
- "fontWeightRegular",
- "fontWeightMedium",
- "fontWeightSemiBold",
- "fontWeightBold",
- "fontFamilyInter",
- "fontFamilyHubot",
-] as const;
-
-// There is an issue with Typescript (eslint) and prettier disagreeing if
-// the type should have parentheses
-// prettier-ignore
-export type TextStyles = (typeof textStyleOptions)[number];
-
interface TooltipWrapperProps extends PropsWithChildren {
tooltipText?: string;
tooltipSide?: "bottom" | "left" | "right" | "top";
@@ -72,10 +9,6 @@ interface TooltipWrapperProps extends PropsWithChildren {
export interface PrimitiveComponentDefaultProps
extends PropsWithChildren,
TooltipWrapperProps {
- csColor?: colors;
- csVariant?: variants;
- csSize?: sizes;
- csTextStyles?: TextStyles[];
rootClasses?: string;
}
diff --git a/packages/cyberstorm/src/utils/utils.ts b/packages/cyberstorm/src/utils/utils.ts
index 5d832ab40..d7e0b297f 100644
--- a/packages/cyberstorm/src/utils/utils.ts
+++ b/packages/cyberstorm/src/utils/utils.ts
@@ -35,3 +35,12 @@ export const classnames = (
): string => {
return classnames.filter(String).join(" ");
};
+
+export const componentClasses = (
+ variant: string,
+ size: string,
+ modifiers?: string[]
+): string[] => {
+ const asd = modifiers ? modifiers?.map((csm) => `ts-modifier--${csm}`) : [];
+ return [`ts-variant--${variant}`, `ts-size--${size}`, ...asd];
+};
{children}
); } else if (csLevel === "5") { element = ( -
+
{children}
);
} else if (csLevel === "6") {
element = (
-
+
{children}
);
@@ -319,17 +204,7 @@ export const Frame = React.forwardRef<
const textProps = forwardedProps as FrameTextProps;
return (
-
+
{children}
@@ -350,14 +225,7 @@ export const Frame = React.forwardRef<
{...strippedForwardedProps}
id={popoverId}
{...{ popover: popoverMode }}
- className={classnames(
- ...(csTextStyles ? csTextStyles : []),
- popooverStyles.popover,
- rootClasses
- )}
- data-color={csColor}
- data-variant={csVariant}
- data-size={csSize}
+ className={rootClasses}
ref={fRef}
>
{noWrapper ? (
@@ -383,13 +251,7 @@ export const Frame = React.forwardRef<
{...strippedForwardedProps}
id={popoverId}
{...{ popover: "auto" }}
- className={classnames(
- ...(csTextStyles ? csTextStyles : []),
- modalStyles.modal
- )}
- data-color={csColor}
- data-variant={csVariant}
- data-size={csSize}
+ className={rootClasses}
ref={fRef}
>
{noWrapper ? (
@@ -425,13 +287,9 @@ export const Frame = React.forwardRef<
child.props.className,
iconStyles.icon,
noWrapper && csMode === "inline" ? iconStyles.inline : null,
- ...(csTextStyles ? csTextStyles : []),
rootClasses
),
ref: noWrapper ? svgIconRef : null,
- "data-color": csColor ? csColor : null,
- "data-variant": csVariant ? csVariant : null,
- "data-size": csSize ? csSize : null,
...svgFProps,
})
);
@@ -448,12 +306,8 @@ export const Frame = React.forwardRef<
className={classnames(
iconStyles.iconWrapper,
iconStyles.inline,
- wrapperClasses,
- ...(csTextStyles ? csTextStyles : [])
+ wrapperClasses
)}
- data-color={csColor}
- data-variant={csVariant}
- data-size={csSize}
ref={spanIconRef}
>
{clones}
@@ -464,14 +318,7 @@ export const Frame = React.forwardRef<
content = (
{clones}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css
deleted file mode 100644
index c2879194d..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.heading {
- font-weight: 700;
- font-family: inter, sans-serif;
- font-style: normal;
- line-height: normal;
-}
-
-.heading[data-stylelevel="1"] {
- font-weight: var(--font-weight-heavy);
- font-size: var(--space--54);
- font-family: Hubot-Sans, sans-serif;
- line-height: 115%; /* 62.1px */
-}
-
-.heading[data-stylelevel="2"] {
- font-size: var(--space--32);
- line-height: 140%; /* 44.8px */
-}
-
-.heading[data-stylelevel="3"] {
- font-size: var(--space--20);
-}
-
-.heading[data-stylelevel="4"] {
- font-size: var(--space--16);
-}
-
-.heading[data-stylelevel="5"] {
- font-size: var(--space--14);
-}
-
-.heading[data-stylelevel="6"] {
- font-size: var(--space--12);
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Modal.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Modal.module.css
deleted file mode 100644
index 153dadbb9..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Modal.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.modal {
- width: 100%;
- height: 100%;
- background: rgba(0 0 0 / 0.6);
- backdrop-filter: blur(10px);
-}
-
-.modal[data-size="s"] {
- --frame-modal-gap: 1rem;
- --frame-modal-padding: 1.5rem 2.25rem;
- --frame-modal-border-radius: 0.25rem;
-}
-
-.modal[data-size="m"] {
- --frame-modal-gap: 2rem;
- --frame-modal-padding: 3rem 5.5rem;
- --frame-modal-border-radius: 0.5rem;
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Popover.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Popover.module.css
deleted file mode 100644
index f53e14f40..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Popover.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.popover[data-size="s"] {
- --frame-popover-gap: 1rem;
- --frame-popover-padding: 1.5rem 2.25rem;
- --frame-popover-border-radius: 0.25rem;
-}
-
-.popover[data-size="m"] {
- --frame-popover-gap: 2rem;
- --frame-popover-padding: 3rem 5.5rem;
- --frame-popover-border-radius: 0.5rem;
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx b/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx
index 9228ff19f..405416062 100644
--- a/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx
+++ b/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx
@@ -1,6 +1,5 @@
import React from "react";
import { PrimitiveComponentDefaultProps, TooltipWrapper } from "../utils/utils";
-import { classnames } from "../../utils/utils";
export interface InputTextInputProps
extends React.InputHTMLAttributes,
@@ -14,10 +13,6 @@ export const Input = React.forwardRef(
children,
primitiveType,
rootClasses,
- csTextStyles,
- csColor,
- csVariant,
- csSize,
tooltipText,
tooltipSide,
...forwardedProps
@@ -29,17 +24,7 @@ export const Input = React.forwardRef(
return (
-
+
{children}
diff --git a/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx b/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx
index 9a8369b40..4a4c5bcf4 100644
--- a/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx
+++ b/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx
@@ -1,69 +1,6 @@
import { PropsWithChildren } from "react";
import { Tooltip } from "../..";
-// TODO: It would be nice if we forced storybook generation of all of the possible combinations.
-// If we do that, we'll have to handle the "unsupported combinations" gracefully somehow.
-// Best would be if we could have typescript warnings and force each "non-supported combination" to be explicitly
-// unsupported. See NewButtons story in storybook for reference
-
-export type variants =
- | "default"
- | "defaultPeek"
- | "primary"
- | "secondary"
- | "tertiary"
- | "tertiaryDimmed"
- | "minimal"
- | "accent"
- | "special";
-
-export type colors =
- | "surface"
- | "surface-alpha"
- | "blue"
- | "pink"
- | "red"
- | "orange"
- | "green"
- | "yellow"
- | "purple"
- | "cyber-green";
-export const colorsList = [
- "surface",
- "surface-alpha",
- "blue",
- "pink",
- "red",
- "orange",
- "green",
- "yellow",
- "purple",
- "cyber-green",
-] as const;
-
-export type sizes = "xxs" | "xs" | "s" | "m" | "l";
-
-export const textStyleOptions = [
- "lineHeightAuto",
- "lineHeightBody",
- "fontSizeXXS",
- "fontSizeXS",
- "fontSizeS",
- "fontSizeM",
- "fontSizeL",
- "fontWeightRegular",
- "fontWeightMedium",
- "fontWeightSemiBold",
- "fontWeightBold",
- "fontFamilyInter",
- "fontFamilyHubot",
-] as const;
-
-// There is an issue with Typescript (eslint) and prettier disagreeing if
-// the type should have parentheses
-// prettier-ignore
-export type TextStyles = (typeof textStyleOptions)[number];
-
interface TooltipWrapperProps extends PropsWithChildren {
tooltipText?: string;
tooltipSide?: "bottom" | "left" | "right" | "top";
@@ -72,10 +9,6 @@ interface TooltipWrapperProps extends PropsWithChildren {
export interface PrimitiveComponentDefaultProps
extends PropsWithChildren,
TooltipWrapperProps {
- csColor?: colors;
- csVariant?: variants;
- csSize?: sizes;
- csTextStyles?: TextStyles[];
rootClasses?: string;
}
diff --git a/packages/cyberstorm/src/utils/utils.ts b/packages/cyberstorm/src/utils/utils.ts
index 5d832ab40..d7e0b297f 100644
--- a/packages/cyberstorm/src/utils/utils.ts
+++ b/packages/cyberstorm/src/utils/utils.ts
@@ -35,3 +35,12 @@ export const classnames = (
): string => {
return classnames.filter(String).join(" ");
};
+
+export const componentClasses = (
+ variant: string,
+ size: string,
+ modifiers?: string[]
+): string[] => {
+ const asd = modifiers ? modifiers?.map((csm) => `ts-modifier--${csm}`) : [];
+ return [`ts-variant--${variant}`, `ts-size--${size}`, ...asd];
+};
{children}
); @@ -319,17 +204,7 @@ export const Frame = React.forwardRef< const textProps = forwardedProps as FrameTextProps; return (+
{children}
{clones}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css
deleted file mode 100644
index c2879194d..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.heading {
- font-weight: 700;
- font-family: inter, sans-serif;
- font-style: normal;
- line-height: normal;
-}
-
-.heading[data-stylelevel="1"] {
- font-weight: var(--font-weight-heavy);
- font-size: var(--space--54);
- font-family: Hubot-Sans, sans-serif;
- line-height: 115%; /* 62.1px */
-}
-
-.heading[data-stylelevel="2"] {
- font-size: var(--space--32);
- line-height: 140%; /* 44.8px */
-}
-
-.heading[data-stylelevel="3"] {
- font-size: var(--space--20);
-}
-
-.heading[data-stylelevel="4"] {
- font-size: var(--space--16);
-}
-
-.heading[data-stylelevel="5"] {
- font-size: var(--space--14);
-}
-
-.heading[data-stylelevel="6"] {
- font-size: var(--space--12);
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Modal.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Modal.module.css
deleted file mode 100644
index 153dadbb9..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Modal.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.modal {
- width: 100%;
- height: 100%;
- background: rgba(0 0 0 / 0.6);
- backdrop-filter: blur(10px);
-}
-
-.modal[data-size="s"] {
- --frame-modal-gap: 1rem;
- --frame-modal-padding: 1.5rem 2.25rem;
- --frame-modal-border-radius: 0.25rem;
-}
-
-.modal[data-size="m"] {
- --frame-modal-gap: 2rem;
- --frame-modal-padding: 3rem 5.5rem;
- --frame-modal-border-radius: 0.5rem;
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Popover.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Popover.module.css
deleted file mode 100644
index f53e14f40..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Popover.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.popover[data-size="s"] {
- --frame-popover-gap: 1rem;
- --frame-popover-padding: 1.5rem 2.25rem;
- --frame-popover-border-radius: 0.25rem;
-}
-
-.popover[data-size="m"] {
- --frame-popover-gap: 2rem;
- --frame-popover-padding: 3rem 5.5rem;
- --frame-popover-border-radius: 0.5rem;
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx b/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx
index 9228ff19f..405416062 100644
--- a/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx
+++ b/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx
@@ -1,6 +1,5 @@
import React from "react";
import { PrimitiveComponentDefaultProps, TooltipWrapper } from "../utils/utils";
-import { classnames } from "../../utils/utils";
export interface InputTextInputProps
extends React.InputHTMLAttributes,
@@ -14,10 +13,6 @@ export const Input = React.forwardRef(
children,
primitiveType,
rootClasses,
- csTextStyles,
- csColor,
- csVariant,
- csSize,
tooltipText,
tooltipSide,
...forwardedProps
@@ -29,17 +24,7 @@ export const Input = React.forwardRef(
return (
-
+
{children}
diff --git a/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx b/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx
index 9a8369b40..4a4c5bcf4 100644
--- a/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx
+++ b/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx
@@ -1,69 +1,6 @@
import { PropsWithChildren } from "react";
import { Tooltip } from "../..";
-// TODO: It would be nice if we forced storybook generation of all of the possible combinations.
-// If we do that, we'll have to handle the "unsupported combinations" gracefully somehow.
-// Best would be if we could have typescript warnings and force each "non-supported combination" to be explicitly
-// unsupported. See NewButtons story in storybook for reference
-
-export type variants =
- | "default"
- | "defaultPeek"
- | "primary"
- | "secondary"
- | "tertiary"
- | "tertiaryDimmed"
- | "minimal"
- | "accent"
- | "special";
-
-export type colors =
- | "surface"
- | "surface-alpha"
- | "blue"
- | "pink"
- | "red"
- | "orange"
- | "green"
- | "yellow"
- | "purple"
- | "cyber-green";
-export const colorsList = [
- "surface",
- "surface-alpha",
- "blue",
- "pink",
- "red",
- "orange",
- "green",
- "yellow",
- "purple",
- "cyber-green",
-] as const;
-
-export type sizes = "xxs" | "xs" | "s" | "m" | "l";
-
-export const textStyleOptions = [
- "lineHeightAuto",
- "lineHeightBody",
- "fontSizeXXS",
- "fontSizeXS",
- "fontSizeS",
- "fontSizeM",
- "fontSizeL",
- "fontWeightRegular",
- "fontWeightMedium",
- "fontWeightSemiBold",
- "fontWeightBold",
- "fontFamilyInter",
- "fontFamilyHubot",
-] as const;
-
-// There is an issue with Typescript (eslint) and prettier disagreeing if
-// the type should have parentheses
-// prettier-ignore
-export type TextStyles = (typeof textStyleOptions)[number];
-
interface TooltipWrapperProps extends PropsWithChildren {
tooltipText?: string;
tooltipSide?: "bottom" | "left" | "right" | "top";
@@ -72,10 +9,6 @@ interface TooltipWrapperProps extends PropsWithChildren {
export interface PrimitiveComponentDefaultProps
extends PropsWithChildren,
TooltipWrapperProps {
- csColor?: colors;
- csVariant?: variants;
- csSize?: sizes;
- csTextStyles?: TextStyles[];
rootClasses?: string;
}
diff --git a/packages/cyberstorm/src/utils/utils.ts b/packages/cyberstorm/src/utils/utils.ts
index 5d832ab40..d7e0b297f 100644
--- a/packages/cyberstorm/src/utils/utils.ts
+++ b/packages/cyberstorm/src/utils/utils.ts
@@ -35,3 +35,12 @@ export const classnames = (
): string => {
return classnames.filter(String).join(" ");
};
+
+export const componentClasses = (
+ variant: string,
+ size: string,
+ modifiers?: string[]
+): string[] => {
+ const asd = modifiers ? modifiers?.map((csm) => `ts-modifier--${csm}`) : [];
+ return [`ts-variant--${variant}`, `ts-size--${size}`, ...asd];
+};