@youngonesworks/ui 0.1.125 → 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/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

@@ -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-secondary",
-	"--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