@youngonesworks/ui 0.1.124 → 0.1.127

package/README.md

@@ -88,36 +88,6 @@ function App() {
 }
 ```
 
-#### TypeScript CSS Variable Helpers
-
-```tsx
-import {
-  getCSSVariable,
-  setCSSVariable,
-  type CSSVariables,
-} from "@youngonesworks/ui/theme";
-
-// Get CSS variable values
-const primaryColor = getCSSVariable("--color-primary");
-const fontSize = getCSSVariable("--font-lg-size");
-
-// Set CSS variables dynamically
-setCSSVariable("--color-primary", "#ff6b35");
-setCSSVariable("--font-lg-size", "1.25rem");
-
-// Type-safe variable names
-const variables: CSSVariables = {
-  colors: {
-    primary: "#10d1bb",
-    secondary: "#6366f1",
-  },
-  typography: {
-    fontLgSize: "1.125rem",
-    fontBaseLine: "1.5rem",
-  },
-};
-```
-
 ### 🔤 Next.js Fonts
 
 #### Setup in Next.js App Router
@@ -171,9 +141,6 @@ export default function RootLayout({ children }) {
 // Components
 import { Button, Card, Input } from "@youngonesworks/ui";
 
-// CSS Variables (TypeScript helpers)
-import { getCSSVariable, setCSSVariable } from "@youngonesworks/ui/theme";
-
 // CSS files (import in CSS/SCSS)
 // @import '@youngonesworks/ui/styles/variables.css';
 // @import '@youngonesworks/ui/styles/utilities.css';
@@ -281,8 +248,7 @@ Contributions are welcome! Please follow these guidelines:
 When adding new CSS variables:
 
 1. Add them to `src/styles/variables.css`
-2. Update TypeScript interfaces in `src/theme/variables.ts`
-3. Document them in this README
+2. Document them in this README
 
 ## License
 

package/dist/components/badge/index.d.ts

@@ -1,6 +1,6 @@
 interface IBadgeProps {
-    styleVariant?: 'green-light' | 'red' | 'accent-blue' | 'warning' | 'gray' | 'black' | 'dark-gray' | 'purple' | 'pink' | 'pink-light' | 'gray' | 'white';
-    color?: 'dark' | 'gray' | 'red' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'green' | 'lime' | 'yellow' | 'orange' | 'teal';
+    styleVariant?: 'green-light' | 'red' | 'accent-blue' | 'warning' | 'gray' | 'black' | 'dark-gray' | 'purple' | 'secondary' | 'secondary-light' | 'gray' | 'white';
+    color?: 'dark' | 'gray' | 'red' | 'secondary' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'green' | 'lime' | 'yellow' | 'orange' | 'teal';
     favorite?: boolean;
     children?: React.ReactNode;
     className?: string;

package/dist/components/themeIcon/ThemeIcon.stories.d.ts

@@ -5,4 +5,4 @@ export default meta;
 type Story = StoryObj<typeof ThemeIcon>;
 export declare const Default: Story;
 export declare const Warning: Story;
-export declare const PinkHeart: Story;
+export declare const SecondaryHeart: Story;

package/dist/components/themeIcon/index.d.ts

@@ -1,6 +1,6 @@
 import { type HTMLAttributes } from 'react';
 export interface IThemeIcon extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
-    styleVariant?: 'black' | 'gray' | 'pink' | 'pink-with-background' | 'turquoise' | 'accent-blue' | 'check' | 'warning' | 'error';
+    styleVariant?: 'black' | 'gray' | 'secondary' | 'secondary-with-background' | 'turquoise' | 'accent-blue' | 'check' | 'warning' | 'error';
     icon: React.ReactNode;
     className?: string;
     adjustedSize?: string | number;

package/dist/foundation/typography/Typography.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Scale: Story;

package/dist/globals.css

@@ -10,6 +10,8 @@
 @import "./styles/utilities.css";
 @import "react-phone-input-2/lib/style.css";
 @import "./styles/editor.css";
+@import "./styles/typography.css";
+@import "./styles/base.css";
 
 @keyframes spin {
   from {

package/dist/index.cjs

@@ -233,7 +233,7 @@ let ACTION_ICON_STYLE_VARIANT = /* @__PURE__ */ function(ACTION_ICON_STYLE_VARIA
 	return ACTION_ICON_STYLE_VARIANT$1;
 }({});
 let THEME_ICON_STYLE_VARIANT = /* @__PURE__ */ function(THEME_ICON_STYLE_VARIANT$1) {
-	THEME_ICON_STYLE_VARIANT$1["PINK_WITH_BACKGROUND"] = "pink-with-background";
+	THEME_ICON_STYLE_VARIANT$1["SECONDARY_WITH_BACKGROUND"] = "secondary-with-background";
 	return THEME_ICON_STYLE_VARIANT$1;
 }({});
 let COLOR = /* @__PURE__ */ function(COLOR$1) {
@@ -244,8 +244,8 @@ let COLOR = /* @__PURE__ */ function(COLOR$1) {
 	COLOR$1["LIGHT_BLUE_DISABLED"] = "light-blue-disabled";
 	COLOR$1["GREEN"] = "green";
 	COLOR$1["GREEN_LIGHT"] = "green-light";
-	COLOR$1["PINK"] = "pink";
-	COLOR$1["PINK_LIGHT"] = "pink-light";
+	COLOR$1["SECONDARY"] = "secondary";
+	COLOR$1["SECONDARY_LIGHT"] = "secondary-light";
 	COLOR$1["ORANGE"] = "orange";
 	COLOR$1["ORANGE_LIGHT"] = "orange-light";
 	COLOR$1["ACCENT_BLUE"] = "accent-blue";
@@ -786,8 +786,8 @@ const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, children
 			"bg-gray-50 text-black": styleVariant === COLOR.DARK_GRAY,
 			"bg-black text-white": styleVariant === COLOR.BLACK,
 			"bg-gray-50 text-gray-800": styleVariant === COLOR.GRAY,
-			"bg-pink-light text-pink": styleVariant === COLOR.PINK_LIGHT,
-			"bg-pink text-white": styleVariant === COLOR.PINK,
+			"bg-secondary-light text-secondary": styleVariant === COLOR.SECONDARY_LIGHT,
+			"bg-secondary text-white": styleVariant === COLOR.SECONDARY,
 			"bg-white text-black": styleVariant === COLOR.WHITE
 		}, className),
 		...props,
@@ -1287,7 +1287,7 @@ const Divider = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_runtim
 //#endregion
 //#region src/components/favouriteButton/index.tsx
 const FavouriteButton = (0, react.forwardRef)((props, ref) => {
-	const { onClick, favourite, iconFilled, iconOutline, favouriteTitle, iconColorSelected = "text-pink", iconColor = "text-gray-800", iconSize, className = "", styleVariant = "transparent", children,...rest } = props;
+	const { onClick, favourite, iconFilled, iconOutline, favouriteTitle, iconColorSelected = "text-secondary", iconColor = "text-gray-800", iconSize, className = "", styleVariant = "transparent", children,...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
 		onClick,
 		"data-component": "favouriteButton",
@@ -1889,7 +1889,7 @@ const Modal = ({ title, children, withCloseButton = true, opened, additionalClas
 					gradient && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
 						"data-testid": "modal-gradient",
 						className: "absolute bottom-0 left-0 mt-8 mb-0 h-2! w-full border-none",
-						style: { backgroundImage: "linear-gradient(90deg, var(--color-light-blue) 0%, var(--color-primary) 50.52%, var(--color-pink) 100%)" }
+						style: { backgroundImage: "linear-gradient(90deg, var(--color-light-blue) 0%, var(--color-primary) 50.52%, var(--color-secondary) 100%)" }
 					})
 				]
 			})
@@ -2852,7 +2852,7 @@ const TabsBadge = ({ children }) => {
 	const isCircular = typeof children === "number" && children <= 9 || typeof children === "string" && children.length === 1 || false;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-testid": "tabs-badge",
-		className: (0, clsx.default)("bg-pink h-5 rounded-full text-xs leading-5 font-medium text-white", {
+		className: (0, clsx.default)("bg-secondary h-5 rounded-full text-xs leading-5 font-medium text-white", {
 			"w-5 text-center": isCircular,
 			"px-2": !isCircular
 		}),
@@ -2955,8 +2955,8 @@ function ThemeIcon({ styleVariant = "black", className, icon, adjustedSize, titl
 	const classNames = cn("bg-transparent h-9 w-9 rounded-[5px] grid place-content-center", {
 		"text-black": styleVariant === COLOR.BLACK,
 		"text-gray-500": styleVariant === COLOR.GRAY,
-		"text-pink": styleVariant === COLOR.PINK,
-		"bg-gray-50 text-pink": styleVariant === THEME_ICON_STYLE_VARIANT.PINK_WITH_BACKGROUND,
+		"text-secondary": styleVariant === COLOR.SECONDARY,
+		"bg-gray-50 text-secondary": styleVariant === THEME_ICON_STYLE_VARIANT.SECONDARY_WITH_BACKGROUND,
 		"text-primary": styleVariant === COLOR.TURQUOISE,
 		"text-accent-blue": styleVariant === COLOR.ACCENT_BLUE,
 		"text-check": styleVariant === COLOR.CHECK,
@@ -3046,7 +3046,7 @@ const TruncatedText = ({ text, limit = 20 }) => {
 		}), text.length > limit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
 			content: text,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-pink",
+				className: "text-secondary",
 				"data-testid": "truncated-text-icon",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconMessageDots, { stroke: 1 })
 			})
@@ -3617,34 +3617,6 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 	})] });
 });
 
-//#endregion
-//#region src/theme/variables.ts
-const CSS_VARIABLE_KEYS = [
-	"--color-primary",
-	"--color-primary-light",
-	"--color-primary-dark",
-	"--color-black",
-	"--color-navy-blue",
-	"--color-white",
-	"--color-accent-blue",
-	"--color-ultra-light-blue",
-	"--color-green",
-	"--color-green-light",
-	"--color-pink",
-	"--color-purple",
-	"--color-orange",
-	"--color-warning",
-	"--color-warning-light",
-	"--color-warning-dark"
-];
-const getCSSVariable = (variable) => {
-	if (typeof window !== "undefined") return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
-	return "";
-};
-const setCSSVariable = (variable, value) => {
-	if (typeof window !== "undefined") document.documentElement.style.setProperty(variable, value);
-};
-
 //#endregion
 exports.AccordionItem = AccordionItem;
 exports.AccordionWrapper = AccordionWrapper;
@@ -3658,7 +3630,6 @@ exports.Badge = Badge;
 exports.BigBadge = BigBadge;
 exports.BreadCrumb = BreadCrumb;
 exports.Button = Button;
-exports.CSS_VARIABLE_KEYS = CSS_VARIABLE_KEYS;
 exports.Checkbox = Checkbox;
 exports.DatePickerInput = DatePickerInput;
 exports.Divider = Divider;
@@ -3714,6 +3685,4 @@ exports.UnorderedListItem = UnorderedListItem;
 exports.UnstyledButton = UnstyledButton;
 exports.WysiwygEditor = WysiwygEditor;
 exports.buttonVariants = buttonVariants;
-exports.getCSSVariable = getCSSVariable;
-exports.setCSSVariable = setCSSVariable;
 //# sourceMappingURL=index.cjs.map