@altrex-ui/styling 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Altrex-UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,135 @@
+# Altrex Styling
+
+A simple design token system for the Altrex design system. This package contains core design tokens for colors, spacing, typography, and more.
+
+## Installation
+
+```bash
+npm install @altrex-ui/styling
+```
+
+## Usage
+
+### CSS Variables
+
+Import the CSS file in your main stylesheet or HTML:
+
+```css
+@import '@altrex-ui/styling/dist/tokens.css';
+```
+
+Then use the CSS variables in your styles:
+
+```css
+.button {
+  background-color: var(--altrex-colors-primary-500);
+  padding: var(--altrex-spacing-4);
+  border-radius: var(--altrex-borderRadius-default);
+  font-size: var(--altrex-fontSize-base);
+}
+
+.card {
+  box-shadow: var(--altrex-shadow-md);
+  border-radius: var(--altrex-borderRadius-lg);
+}
+```
+
+### JavaScript/TypeScript
+
+Import tokens directly in your JavaScript or TypeScript files:
+
+```javascript
+import { tokens, flatTokens, cssVarNames } from '@altrex-ui/styling';
+
+// Access nested tokens
+const primaryColor = tokens.colors.primary['500']; // '#007cff'
+
+// Access flattened tokens
+const primaryColor = flatTokens['colors.primary.500']; // '#007cff'
+
+// Get CSS variable names
+const cssVar = cssVarNames['colors.primary.500']; // '--altrex-colors-primary-500'
+
+// Use in styled-components or other CSS-in-JS
+const Button = styled.button`
+  background-color: ${tokens.colors.primary['500']};
+  padding: ${tokens.spacing['4']};
+`;
+```
+
+## Available Tokens
+
+### Colors
+
+- `colors.primary.*` - Primary brand colors (50-900)
+- `colors.secondary.*` - Secondary brand colors (50-900)
+- `colors.neutral.*` - Neutral/gray colors (50-900)
+- `colors.success.*` - Success state colors
+- `colors.warning.*` - Warning state colors
+- `colors.error.*` - Error state colors
+- `colors.info.*` - Info state colors
+
+### Spacing
+
+Scale from `spacing.0` (0) to `spacing.24` (6rem)
+
+### Typography
+
+- `fontSize.*` - Font sizes from xs to 5xl
+- `fontWeight.*` - Font weights (light, normal, medium, semibold, bold)
+- `lineHeight.*` - Line heights (none, tight, snug, normal, relaxed, loose)
+
+### Border Radius
+
+- `borderRadius.*` - Border radius values (none, sm, default, md, lg, xl, 2xl, full)
+
+### Shadows
+
+- `shadow.*` - Box shadow values (sm, default, md, lg, xl, 2xl, inner)
+
+### Breakpoints
+
+- `breakpoints.*` - Responsive breakpoints (sm, md, lg, xl, 2xl)
+
+## Development
+
+### Editing Tokens
+
+Edit the tokens in [src/tokens.json](src/tokens.json). The file structure is:
+
+```json
+{
+  "colors": {
+    "primary": {
+      "500": "#007cff"
+    }
+  }
+}
+```
+
+### Building
+
+After editing tokens, run:
+
+```bash
+npm run build
+```
+
+This generates:
+- `dist/tokens.css` - CSS custom properties
+- `dist/tokens.js` - JavaScript exports
+- `dist/tokens.d.ts` - TypeScript type definitions
+
+## Token Naming Convention
+
+All CSS variables follow the pattern: `--altrex-{category}-{name}-{variant}`
+
+Examples:
+- `--altrex-colors-primary-500`
+- `--altrex-spacing-4`
+- `--altrex-fontSize-lg`
+- `--altrex-borderRadius-default`
+
+## License
+
+MIT

package/dist/index.js

@@ -0,0 +1 @@
+export * from './tokens.js';

package/dist/tokens.css

@@ -0,0 +1,102 @@
+/**
+ * Altrex Design System Tokens
+ * Generated automatically - do not edit
+ */
+
+:root {
+  --altrex-colors-primary-50: #e6f2ff;
+  --altrex-colors-primary-100: #cce5ff;
+  --altrex-colors-primary-200: #99cbff;
+  --altrex-colors-primary-300: #66b0ff;
+  --altrex-colors-primary-400: #3396ff;
+  --altrex-colors-primary-500: #007cff;
+  --altrex-colors-primary-600: #0063cc;
+  --altrex-colors-primary-700: #004a99;
+  --altrex-colors-primary-800: #003166;
+  --altrex-colors-primary-900: #001933;
+  --altrex-colors-secondary-50: #f0e6ff;
+  --altrex-colors-secondary-100: #e0ccff;
+  --altrex-colors-secondary-200: #c299ff;
+  --altrex-colors-secondary-300: #a366ff;
+  --altrex-colors-secondary-400: #8533ff;
+  --altrex-colors-secondary-500: #6600ff;
+  --altrex-colors-secondary-600: #5200cc;
+  --altrex-colors-secondary-700: #3d0099;
+  --altrex-colors-secondary-800: #290066;
+  --altrex-colors-secondary-900: #140033;
+  --altrex-colors-neutral-50: #f8f9fa;
+  --altrex-colors-neutral-100: #f1f3f5;
+  --altrex-colors-neutral-200: #e9ecef;
+  --altrex-colors-neutral-300: #dee2e6;
+  --altrex-colors-neutral-400: #ced4da;
+  --altrex-colors-neutral-500: #adb5bd;
+  --altrex-colors-neutral-600: #868e96;
+  --altrex-colors-neutral-700: #495057;
+  --altrex-colors-neutral-800: #343a40;
+  --altrex-colors-neutral-900: #212529;
+  --altrex-colors-success-50: #e6f9f0;
+  --altrex-colors-success-500: #10b981;
+  --altrex-colors-success-900: #064e3b;
+  --altrex-colors-warning-50: #fff9e6;
+  --altrex-colors-warning-500: #f59e0b;
+  --altrex-colors-warning-900: #78350f;
+  --altrex-colors-error-50: #ffe6e6;
+  --altrex-colors-error-500: #ef4444;
+  --altrex-colors-error-900: #7f1d1d;
+  --altrex-colors-info-50: #e6f7ff;
+  --altrex-colors-info-500: #3b82f6;
+  --altrex-colors-info-900: #1e3a8a;
+  --altrex-spacing-0: 0;
+  --altrex-spacing-1: 0.25rem;
+  --altrex-spacing-2: 0.5rem;
+  --altrex-spacing-3: 0.75rem;
+  --altrex-spacing-4: 1rem;
+  --altrex-spacing-5: 1.25rem;
+  --altrex-spacing-6: 1.5rem;
+  --altrex-spacing-8: 2rem;
+  --altrex-spacing-10: 2.5rem;
+  --altrex-spacing-12: 3rem;
+  --altrex-spacing-16: 4rem;
+  --altrex-spacing-20: 5rem;
+  --altrex-spacing-24: 6rem;
+  --altrex-fontSize-xs: 0.75rem;
+  --altrex-fontSize-sm: 0.875rem;
+  --altrex-fontSize-base: 1rem;
+  --altrex-fontSize-lg: 1.125rem;
+  --altrex-fontSize-xl: 1.25rem;
+  --altrex-fontSize-2xl: 1.5rem;
+  --altrex-fontSize-3xl: 1.875rem;
+  --altrex-fontSize-4xl: 2.25rem;
+  --altrex-fontSize-5xl: 3rem;
+  --altrex-fontWeight-light: 300;
+  --altrex-fontWeight-normal: 400;
+  --altrex-fontWeight-medium: 500;
+  --altrex-fontWeight-semibold: 600;
+  --altrex-fontWeight-bold: 700;
+  --altrex-lineHeight-none: 1;
+  --altrex-lineHeight-tight: 1.25;
+  --altrex-lineHeight-snug: 1.375;
+  --altrex-lineHeight-normal: 1.5;
+  --altrex-lineHeight-relaxed: 1.625;
+  --altrex-lineHeight-loose: 2;
+  --altrex-borderRadius-none: 0;
+  --altrex-borderRadius-sm: 0.25rem;
+  --altrex-borderRadius-default: 0.5rem;
+  --altrex-borderRadius-md: 0.75rem;
+  --altrex-borderRadius-lg: 1rem;
+  --altrex-borderRadius-xl: 1.5rem;
+  --altrex-borderRadius-2xl: 2rem;
+  --altrex-borderRadius-full: 9999px;
+  --altrex-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --altrex-shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --altrex-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --altrex-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --altrex-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --altrex-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --altrex-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --altrex-breakpoints-sm: 640px;
+  --altrex-breakpoints-md: 768px;
+  --altrex-breakpoints-lg: 1024px;
+  --altrex-breakpoints-xl: 1280px;
+  --altrex-breakpoints-2xl: 1536px;
+}

package/dist/tokens.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Altrex Design System Tokens
+ * Generated automatically - do not edit
+ */
+
+export const tokens: {
+  colors: Record<string, Record<string, string>>;
+  spacing: Record<string, string>;
+  fontSize: Record<string, string>;
+  fontWeight: Record<string, string>;
+  lineHeight: Record<string, string>;
+  borderRadius: Record<string, string>;
+  shadow: Record<string, string>;
+  breakpoints: Record<string, string>;
+};
+
+export const flatTokens: Record<string, string>;
+export const cssVarNames: Record<string, string>;

package/dist/tokens.js

@@ -0,0 +1,328 @@
+/**
+ * Altrex Design System Tokens
+ * Generated automatically - do not edit
+ */
+
+export const tokens = {
+  "colors": {
+    "primary": {
+      "50": "#e6f2ff",
+      "100": "#cce5ff",
+      "200": "#99cbff",
+      "300": "#66b0ff",
+      "400": "#3396ff",
+      "500": "#007cff",
+      "600": "#0063cc",
+      "700": "#004a99",
+      "800": "#003166",
+      "900": "#001933"
+    },
+    "secondary": {
+      "50": "#f0e6ff",
+      "100": "#e0ccff",
+      "200": "#c299ff",
+      "300": "#a366ff",
+      "400": "#8533ff",
+      "500": "#6600ff",
+      "600": "#5200cc",
+      "700": "#3d0099",
+      "800": "#290066",
+      "900": "#140033"
+    },
+    "neutral": {
+      "50": "#f8f9fa",
+      "100": "#f1f3f5",
+      "200": "#e9ecef",
+      "300": "#dee2e6",
+      "400": "#ced4da",
+      "500": "#adb5bd",
+      "600": "#868e96",
+      "700": "#495057",
+      "800": "#343a40",
+      "900": "#212529"
+    },
+    "success": {
+      "50": "#e6f9f0",
+      "500": "#10b981",
+      "900": "#064e3b"
+    },
+    "warning": {
+      "50": "#fff9e6",
+      "500": "#f59e0b",
+      "900": "#78350f"
+    },
+    "error": {
+      "50": "#ffe6e6",
+      "500": "#ef4444",
+      "900": "#7f1d1d"
+    },
+    "info": {
+      "50": "#e6f7ff",
+      "500": "#3b82f6",
+      "900": "#1e3a8a"
+    }
+  },
+  "spacing": {
+    "0": "0",
+    "1": "0.25rem",
+    "2": "0.5rem",
+    "3": "0.75rem",
+    "4": "1rem",
+    "5": "1.25rem",
+    "6": "1.5rem",
+    "8": "2rem",
+    "10": "2.5rem",
+    "12": "3rem",
+    "16": "4rem",
+    "20": "5rem",
+    "24": "6rem"
+  },
+  "fontSize": {
+    "xs": "0.75rem",
+    "sm": "0.875rem",
+    "base": "1rem",
+    "lg": "1.125rem",
+    "xl": "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem"
+  },
+  "fontWeight": {
+    "light": "300",
+    "normal": "400",
+    "medium": "500",
+    "semibold": "600",
+    "bold": "700"
+  },
+  "lineHeight": {
+    "none": "1",
+    "tight": "1.25",
+    "snug": "1.375",
+    "normal": "1.5",
+    "relaxed": "1.625",
+    "loose": "2"
+  },
+  "borderRadius": {
+    "none": "0",
+    "sm": "0.25rem",
+    "default": "0.5rem",
+    "md": "0.75rem",
+    "lg": "1rem",
+    "xl": "1.5rem",
+    "2xl": "2rem",
+    "full": "9999px"
+  },
+  "shadow": {
+    "sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    "default": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+    "md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    "lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+    "xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+    "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    "inner": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
+  },
+  "breakpoints": {
+    "sm": "640px",
+    "md": "768px",
+    "lg": "1024px",
+    "xl": "1280px",
+    "2xl": "1536px"
+  }
+};
+
+export const flatTokens = {
+  "colors.primary.50": "#e6f2ff",
+  "colors.primary.100": "#cce5ff",
+  "colors.primary.200": "#99cbff",
+  "colors.primary.300": "#66b0ff",
+  "colors.primary.400": "#3396ff",
+  "colors.primary.500": "#007cff",
+  "colors.primary.600": "#0063cc",
+  "colors.primary.700": "#004a99",
+  "colors.primary.800": "#003166",
+  "colors.primary.900": "#001933",
+  "colors.secondary.50": "#f0e6ff",
+  "colors.secondary.100": "#e0ccff",
+  "colors.secondary.200": "#c299ff",
+  "colors.secondary.300": "#a366ff",
+  "colors.secondary.400": "#8533ff",
+  "colors.secondary.500": "#6600ff",
+  "colors.secondary.600": "#5200cc",
+  "colors.secondary.700": "#3d0099",
+  "colors.secondary.800": "#290066",
+  "colors.secondary.900": "#140033",
+  "colors.neutral.50": "#f8f9fa",
+  "colors.neutral.100": "#f1f3f5",
+  "colors.neutral.200": "#e9ecef",
+  "colors.neutral.300": "#dee2e6",
+  "colors.neutral.400": "#ced4da",
+  "colors.neutral.500": "#adb5bd",
+  "colors.neutral.600": "#868e96",
+  "colors.neutral.700": "#495057",
+  "colors.neutral.800": "#343a40",
+  "colors.neutral.900": "#212529",
+  "colors.success.50": "#e6f9f0",
+  "colors.success.500": "#10b981",
+  "colors.success.900": "#064e3b",
+  "colors.warning.50": "#fff9e6",
+  "colors.warning.500": "#f59e0b",
+  "colors.warning.900": "#78350f",
+  "colors.error.50": "#ffe6e6",
+  "colors.error.500": "#ef4444",
+  "colors.error.900": "#7f1d1d",
+  "colors.info.50": "#e6f7ff",
+  "colors.info.500": "#3b82f6",
+  "colors.info.900": "#1e3a8a",
+  "spacing.0": "0",
+  "spacing.1": "0.25rem",
+  "spacing.2": "0.5rem",
+  "spacing.3": "0.75rem",
+  "spacing.4": "1rem",
+  "spacing.5": "1.25rem",
+  "spacing.6": "1.5rem",
+  "spacing.8": "2rem",
+  "spacing.10": "2.5rem",
+  "spacing.12": "3rem",
+  "spacing.16": "4rem",
+  "spacing.20": "5rem",
+  "spacing.24": "6rem",
+  "fontSize.xs": "0.75rem",
+  "fontSize.sm": "0.875rem",
+  "fontSize.base": "1rem",
+  "fontSize.lg": "1.125rem",
+  "fontSize.xl": "1.25rem",
+  "fontSize.2xl": "1.5rem",
+  "fontSize.3xl": "1.875rem",
+  "fontSize.4xl": "2.25rem",
+  "fontSize.5xl": "3rem",
+  "fontWeight.light": "300",
+  "fontWeight.normal": "400",
+  "fontWeight.medium": "500",
+  "fontWeight.semibold": "600",
+  "fontWeight.bold": "700",
+  "lineHeight.none": "1",
+  "lineHeight.tight": "1.25",
+  "lineHeight.snug": "1.375",
+  "lineHeight.normal": "1.5",
+  "lineHeight.relaxed": "1.625",
+  "lineHeight.loose": "2",
+  "borderRadius.none": "0",
+  "borderRadius.sm": "0.25rem",
+  "borderRadius.default": "0.5rem",
+  "borderRadius.md": "0.75rem",
+  "borderRadius.lg": "1rem",
+  "borderRadius.xl": "1.5rem",
+  "borderRadius.2xl": "2rem",
+  "borderRadius.full": "9999px",
+  "shadow.sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+  "shadow.default": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+  "shadow.md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+  "shadow.lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+  "shadow.xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+  "shadow.2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+  "shadow.inner": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+  "breakpoints.sm": "640px",
+  "breakpoints.md": "768px",
+  "breakpoints.lg": "1024px",
+  "breakpoints.xl": "1280px",
+  "breakpoints.2xl": "1536px"
+};
+
+export const cssVarNames = {
+  "colors.primary.50": "--altrex-colors-primary-50",
+  "colors.primary.100": "--altrex-colors-primary-100",
+  "colors.primary.200": "--altrex-colors-primary-200",
+  "colors.primary.300": "--altrex-colors-primary-300",
+  "colors.primary.400": "--altrex-colors-primary-400",
+  "colors.primary.500": "--altrex-colors-primary-500",
+  "colors.primary.600": "--altrex-colors-primary-600",
+  "colors.primary.700": "--altrex-colors-primary-700",
+  "colors.primary.800": "--altrex-colors-primary-800",
+  "colors.primary.900": "--altrex-colors-primary-900",
+  "colors.secondary.50": "--altrex-colors-secondary-50",
+  "colors.secondary.100": "--altrex-colors-secondary-100",
+  "colors.secondary.200": "--altrex-colors-secondary-200",
+  "colors.secondary.300": "--altrex-colors-secondary-300",
+  "colors.secondary.400": "--altrex-colors-secondary-400",
+  "colors.secondary.500": "--altrex-colors-secondary-500",
+  "colors.secondary.600": "--altrex-colors-secondary-600",
+  "colors.secondary.700": "--altrex-colors-secondary-700",
+  "colors.secondary.800": "--altrex-colors-secondary-800",
+  "colors.secondary.900": "--altrex-colors-secondary-900",
+  "colors.neutral.50": "--altrex-colors-neutral-50",
+  "colors.neutral.100": "--altrex-colors-neutral-100",
+  "colors.neutral.200": "--altrex-colors-neutral-200",
+  "colors.neutral.300": "--altrex-colors-neutral-300",
+  "colors.neutral.400": "--altrex-colors-neutral-400",
+  "colors.neutral.500": "--altrex-colors-neutral-500",
+  "colors.neutral.600": "--altrex-colors-neutral-600",
+  "colors.neutral.700": "--altrex-colors-neutral-700",
+  "colors.neutral.800": "--altrex-colors-neutral-800",
+  "colors.neutral.900": "--altrex-colors-neutral-900",
+  "colors.success.50": "--altrex-colors-success-50",
+  "colors.success.500": "--altrex-colors-success-500",
+  "colors.success.900": "--altrex-colors-success-900",
+  "colors.warning.50": "--altrex-colors-warning-50",
+  "colors.warning.500": "--altrex-colors-warning-500",
+  "colors.warning.900": "--altrex-colors-warning-900",
+  "colors.error.50": "--altrex-colors-error-50",
+  "colors.error.500": "--altrex-colors-error-500",
+  "colors.error.900": "--altrex-colors-error-900",
+  "colors.info.50": "--altrex-colors-info-50",
+  "colors.info.500": "--altrex-colors-info-500",
+  "colors.info.900": "--altrex-colors-info-900",
+  "spacing.0": "--altrex-spacing-0",
+  "spacing.1": "--altrex-spacing-1",
+  "spacing.2": "--altrex-spacing-2",
+  "spacing.3": "--altrex-spacing-3",
+  "spacing.4": "--altrex-spacing-4",
+  "spacing.5": "--altrex-spacing-5",
+  "spacing.6": "--altrex-spacing-6",
+  "spacing.8": "--altrex-spacing-8",
+  "spacing.10": "--altrex-spacing-10",
+  "spacing.12": "--altrex-spacing-12",
+  "spacing.16": "--altrex-spacing-16",
+  "spacing.20": "--altrex-spacing-20",
+  "spacing.24": "--altrex-spacing-24",
+  "fontSize.xs": "--altrex-fontSize-xs",
+  "fontSize.sm": "--altrex-fontSize-sm",
+  "fontSize.base": "--altrex-fontSize-base",
+  "fontSize.lg": "--altrex-fontSize-lg",
+  "fontSize.xl": "--altrex-fontSize-xl",
+  "fontSize.2xl": "--altrex-fontSize-2xl",
+  "fontSize.3xl": "--altrex-fontSize-3xl",
+  "fontSize.4xl": "--altrex-fontSize-4xl",
+  "fontSize.5xl": "--altrex-fontSize-5xl",
+  "fontWeight.light": "--altrex-fontWeight-light",
+  "fontWeight.normal": "--altrex-fontWeight-normal",
+  "fontWeight.medium": "--altrex-fontWeight-medium",
+  "fontWeight.semibold": "--altrex-fontWeight-semibold",
+  "fontWeight.bold": "--altrex-fontWeight-bold",
+  "lineHeight.none": "--altrex-lineHeight-none",
+  "lineHeight.tight": "--altrex-lineHeight-tight",
+  "lineHeight.snug": "--altrex-lineHeight-snug",
+  "lineHeight.normal": "--altrex-lineHeight-normal",
+  "lineHeight.relaxed": "--altrex-lineHeight-relaxed",
+  "lineHeight.loose": "--altrex-lineHeight-loose",
+  "borderRadius.none": "--altrex-borderRadius-none",
+  "borderRadius.sm": "--altrex-borderRadius-sm",
+  "borderRadius.default": "--altrex-borderRadius-default",
+  "borderRadius.md": "--altrex-borderRadius-md",
+  "borderRadius.lg": "--altrex-borderRadius-lg",
+  "borderRadius.xl": "--altrex-borderRadius-xl",
+  "borderRadius.2xl": "--altrex-borderRadius-2xl",
+  "borderRadius.full": "--altrex-borderRadius-full",
+  "shadow.sm": "--altrex-shadow-sm",
+  "shadow.default": "--altrex-shadow-default",
+  "shadow.md": "--altrex-shadow-md",
+  "shadow.lg": "--altrex-shadow-lg",
+  "shadow.xl": "--altrex-shadow-xl",
+  "shadow.2xl": "--altrex-shadow-2xl",
+  "shadow.inner": "--altrex-shadow-inner",
+  "breakpoints.sm": "--altrex-breakpoints-sm",
+  "breakpoints.md": "--altrex-breakpoints-md",
+  "breakpoints.lg": "--altrex-breakpoints-lg",
+  "breakpoints.xl": "--altrex-breakpoints-xl",
+  "breakpoints.2xl": "--altrex-breakpoints-2xl"
+};

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@altrex-ui/styling",
+  "version": "0.1.1",
+  "description": "Core design tokens for the Altrex design system",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "node build.js",
+    "watch": "node build.js --watch"
+  },
+  "keywords": [
+    "design-tokens",
+    "design-system",
+    "altrex",
+    "css-variables"
+  ],
+  "author": "Altrex UI",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ]
+}