ps-helix 5.1.2 → 6.0.0

package/src/lib/styles/utilities/spacing.utils.css

@@ -1,150 +1,150 @@
-/* Utility Classes - Spacing */
-
-/* Margin utilities */
-.m-0 { margin: 0; }
-.mt-0 { margin-top: 0; }
-.mr-0 { margin-right: 0; }
-.mb-0 { margin-bottom: 0; }
-.ml-0 { margin-left: 0; }
-.mx-0 { margin-left: 0; margin-right: 0; }
-.my-0 { margin-top: 0; margin-bottom: 0; }
-
-.m-xs { margin: var(--spacing-xs); }
-.m-sm { margin: var(--spacing-sm); }
-.m-md { margin: var(--spacing-md); }
-.m-lg { margin: var(--spacing-lg); }
-.m-xl { margin: var(--spacing-xl); }
-.m-2xl { margin: var(--spacing-2xl); }
-
-/* Margin top */
-.mt-xs { margin-top: var(--spacing-xs); }
-.mt-sm { margin-top: var(--spacing-sm); }
-.mt-md { margin-top: var(--spacing-md); }
-.mt-lg { margin-top: var(--spacing-lg); }
-.mt-xl { margin-top: var(--spacing-xl); }
-.mt-2xl { margin-top: var(--spacing-2xl); }
-
-/* Margin bottom */
-.mb-xs { margin-bottom: var(--spacing-xs); }
-.mb-sm { margin-bottom: var(--spacing-sm); }
-.mb-md { margin-bottom: var(--spacing-md); }
-.mb-lg { margin-bottom: var(--spacing-lg); }
-.mb-xl { margin-bottom: var(--spacing-xl); }
-.mb-2xl { margin-bottom: var(--spacing-2xl); }
-
-/* Margin left/right */
-.ml-xs { margin-left: var(--spacing-xs); }
-.ml-sm { margin-left: var(--spacing-sm); }
-.ml-md { margin-left: var(--spacing-md); }
-.ml-lg { margin-left: var(--spacing-lg); }
-.ml-xl { margin-left: var(--spacing-xl); }
-
-.mr-xs { margin-right: var(--spacing-xs); }
-.mr-sm { margin-right: var(--spacing-sm); }
-.mr-md { margin-right: var(--spacing-md); }
-.mr-lg { margin-right: var(--spacing-lg); }
-.mr-xl { margin-right: var(--spacing-xl); }
-
-/* Margin horizontal/vertical */
-.mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
-.mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
-.mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
-.mx-lg { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
-.mx-xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); }
-
-.my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
-.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
-.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
-.my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
-.my-xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }
-
-/* Auto margins */
-.mx-auto { margin-left: auto; margin-right: auto; }
-.my-auto { margin-top: auto; margin-bottom: auto; }
-.ml-auto { margin-left: auto; }
-.mr-auto { margin-right: auto; }
-.mt-auto { margin-top: auto; }
-.mb-auto { margin-bottom: auto; }
-
-/* Padding utilities */
-.p-0 { padding: 0; }
-.pt-0 { padding-top: 0; }
-.pr-0 { padding-right: 0; }
-.pb-0 { padding-bottom: 0; }
-.pl-0 { padding-left: 0; }
-.px-0 { padding-left: 0; padding-right: 0; }
-.py-0 { padding-top: 0; padding-bottom: 0; }
-
-.p-xs { padding: var(--spacing-xs); }
-.p-sm { padding: var(--spacing-sm); }
-.p-md { padding: var(--spacing-md); }
-.p-lg { padding: var(--spacing-lg); }
-.p-xl { padding: var(--spacing-xl); }
-.p-2xl { padding: var(--spacing-2xl); }
-
-/* Padding top */
-.pt-xs { padding-top: var(--spacing-xs); }
-.pt-sm { padding-top: var(--spacing-sm); }
-.pt-md { padding-top: var(--spacing-md); }
-.pt-lg { padding-top: var(--spacing-lg); }
-.pt-xl { padding-top: var(--spacing-xl); }
-.pt-2xl { padding-top: var(--spacing-2xl); }
-
-/* Padding bottom */
-.pb-xs { padding-bottom: var(--spacing-xs); }
-.pb-sm { padding-bottom: var(--spacing-sm); }
-.pb-md { padding-bottom: var(--spacing-md); }
-.pb-lg { padding-bottom: var(--spacing-lg); }
-.pb-xl { padding-bottom: var(--spacing-xl); }
-.pb-2xl { padding-bottom: var(--spacing-2xl); }
-
-/* Padding left/right */
-.pl-xs { padding-left: var(--spacing-xs); }
-.pl-sm { padding-left: var(--spacing-sm); }
-.pl-md { padding-left: var(--spacing-md); }
-.pl-lg { padding-left: var(--spacing-lg); }
-.pl-xl { padding-left: var(--spacing-xl); }
-
-.pr-xs { padding-right: var(--spacing-xs); }
-.pr-sm { padding-right: var(--spacing-sm); }
-.pr-md { padding-right: var(--spacing-md); }
-.pr-lg { padding-right: var(--spacing-lg); }
-.pr-xl { padding-right: var(--spacing-xl); }
-
-/* Padding horizontal/vertical */
-.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
-.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
-.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
-.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
-.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
-
-.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
-.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
-.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
-.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
-.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
-
-/* Gap utilities */
-.gap-0 { gap: 0; }
-.gap-xs { gap: var(--spacing-xs); }
-.gap-sm { gap: var(--spacing-sm); }
-.gap-md { gap: var(--spacing-md); }
-.gap-lg { gap: var(--spacing-lg); }
-.gap-xl { gap: var(--spacing-xl); }
-.gap-2xl { gap: var(--spacing-2xl); }
-
-/* Column gap utilities */
-.gap-x-0 { column-gap: 0; }
-.gap-x-xs { column-gap: var(--spacing-xs); }
-.gap-x-sm { column-gap: var(--spacing-sm); }
-.gap-x-md { column-gap: var(--spacing-md); }
-.gap-x-lg { column-gap: var(--spacing-lg); }
-.gap-x-xl { column-gap: var(--spacing-xl); }
-
-/* Row gap utilities */
-.gap-y-0 { row-gap: 0; }
-.gap-y-xs { row-gap: var(--spacing-xs); }
-.gap-y-sm { row-gap: var(--spacing-sm); }
-.gap-y-md { row-gap: var(--spacing-md); }
-.gap-y-lg { row-gap: var(--spacing-lg); }
-.gap-y-xl { row-gap: var(--spacing-xl); }
+/* Utility Classes - Spacing */
+
+/* Margin utilities */
+.psh-m-0 { margin: 0; }
+.psh-mt-0 { margin-top: 0; }
+.psh-mr-0 { margin-right: 0; }
+.psh-mb-0 { margin-bottom: 0; }
+.psh-ml-0 { margin-left: 0; }
+.psh-mx-0 { margin-left: 0; margin-right: 0; }
+.psh-my-0 { margin-top: 0; margin-bottom: 0; }
+
+.psh-m-xs { margin: var(--spacing-xs); }
+.psh-m-sm { margin: var(--spacing-sm); }
+.psh-m-md { margin: var(--spacing-md); }
+.psh-m-lg { margin: var(--spacing-lg); }
+.psh-m-xl { margin: var(--spacing-xl); }
+.psh-m-2xl { margin: var(--spacing-2xl); }
+
+/* Margin top */
+.psh-mt-xs { margin-top: var(--spacing-xs); }
+.psh-mt-sm { margin-top: var(--spacing-sm); }
+.psh-mt-md { margin-top: var(--spacing-md); }
+.psh-mt-lg { margin-top: var(--spacing-lg); }
+.psh-mt-xl { margin-top: var(--spacing-xl); }
+.psh-mt-2xl { margin-top: var(--spacing-2xl); }
+
+/* Margin bottom */
+.psh-mb-xs { margin-bottom: var(--spacing-xs); }
+.psh-mb-sm { margin-bottom: var(--spacing-sm); }
+.psh-mb-md { margin-bottom: var(--spacing-md); }
+.psh-mb-lg { margin-bottom: var(--spacing-lg); }
+.psh-mb-xl { margin-bottom: var(--spacing-xl); }
+.psh-mb-2xl { margin-bottom: var(--spacing-2xl); }
+
+/* Margin left/right */
+.psh-ml-xs { margin-left: var(--spacing-xs); }
+.psh-ml-sm { margin-left: var(--spacing-sm); }
+.psh-ml-md { margin-left: var(--spacing-md); }
+.psh-ml-lg { margin-left: var(--spacing-lg); }
+.psh-ml-xl { margin-left: var(--spacing-xl); }
+
+.psh-mr-xs { margin-right: var(--spacing-xs); }
+.psh-mr-sm { margin-right: var(--spacing-sm); }
+.psh-mr-md { margin-right: var(--spacing-md); }
+.psh-mr-lg { margin-right: var(--spacing-lg); }
+.psh-mr-xl { margin-right: var(--spacing-xl); }
+
+/* Margin horizontal/vertical */
+.psh-mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
+.psh-mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
+.psh-mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
+.psh-mx-lg { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
+.psh-mx-xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); }
+
+.psh-my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
+.psh-my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
+.psh-my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
+.psh-my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
+.psh-my-xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }
+
+/* Auto margins */
+.psh-mx-auto { margin-left: auto; margin-right: auto; }
+.psh-my-auto { margin-top: auto; margin-bottom: auto; }
+.psh-ml-auto { margin-left: auto; }
+.psh-mr-auto { margin-right: auto; }
+.psh-mt-auto { margin-top: auto; }
+.psh-mb-auto { margin-bottom: auto; }
+
+/* Padding utilities */
+.psh-p-0 { padding: 0; }
+.psh-pt-0 { padding-top: 0; }
+.psh-pr-0 { padding-right: 0; }
+.psh-pb-0 { padding-bottom: 0; }
+.psh-pl-0 { padding-left: 0; }
+.psh-px-0 { padding-left: 0; padding-right: 0; }
+.psh-py-0 { padding-top: 0; padding-bottom: 0; }
+
+.psh-p-xs { padding: var(--spacing-xs); }
+.psh-p-sm { padding: var(--spacing-sm); }
+.psh-p-md { padding: var(--spacing-md); }
+.psh-p-lg { padding: var(--spacing-lg); }
+.psh-p-xl { padding: var(--spacing-xl); }
+.psh-p-2xl { padding: var(--spacing-2xl); }
+
+/* Padding top */
+.psh-pt-xs { padding-top: var(--spacing-xs); }
+.psh-pt-sm { padding-top: var(--spacing-sm); }
+.psh-pt-md { padding-top: var(--spacing-md); }
+.psh-pt-lg { padding-top: var(--spacing-lg); }
+.psh-pt-xl { padding-top: var(--spacing-xl); }
+.psh-pt-2xl { padding-top: var(--spacing-2xl); }
+
+/* Padding bottom */
+.psh-pb-xs { padding-bottom: var(--spacing-xs); }
+.psh-pb-sm { padding-bottom: var(--spacing-sm); }
+.psh-pb-md { padding-bottom: var(--spacing-md); }
+.psh-pb-lg { padding-bottom: var(--spacing-lg); }
+.psh-pb-xl { padding-bottom: var(--spacing-xl); }
+.psh-pb-2xl { padding-bottom: var(--spacing-2xl); }
+
+/* Padding left/right */
+.psh-pl-xs { padding-left: var(--spacing-xs); }
+.psh-pl-sm { padding-left: var(--spacing-sm); }
+.psh-pl-md { padding-left: var(--spacing-md); }
+.psh-pl-lg { padding-left: var(--spacing-lg); }
+.psh-pl-xl { padding-left: var(--spacing-xl); }
+
+.psh-pr-xs { padding-right: var(--spacing-xs); }
+.psh-pr-sm { padding-right: var(--spacing-sm); }
+.psh-pr-md { padding-right: var(--spacing-md); }
+.psh-pr-lg { padding-right: var(--spacing-lg); }
+.psh-pr-xl { padding-right: var(--spacing-xl); }
+
+/* Padding horizontal/vertical */
+.psh-px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
+.psh-px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
+.psh-px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
+.psh-px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
+.psh-px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
+
+.psh-py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
+.psh-py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
+.psh-py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
+.psh-py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
+.psh-py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
+
+/* Gap utilities */
+.psh-gap-0 { gap: 0; }
+.psh-gap-xs { gap: var(--spacing-xs); }
+.psh-gap-sm { gap: var(--spacing-sm); }
+.psh-gap-md { gap: var(--spacing-md); }
+.psh-gap-lg { gap: var(--spacing-lg); }
+.psh-gap-xl { gap: var(--spacing-xl); }
+.psh-gap-2xl { gap: var(--spacing-2xl); }
+
+/* Column gap utilities */
+.psh-gap-x-0 { column-gap: 0; }
+.psh-gap-x-xs { column-gap: var(--spacing-xs); }
+.psh-gap-x-sm { column-gap: var(--spacing-sm); }
+.psh-gap-x-md { column-gap: var(--spacing-md); }
+.psh-gap-x-lg { column-gap: var(--spacing-lg); }
+.psh-gap-x-xl { column-gap: var(--spacing-xl); }
+
+/* Row gap utilities */
+.psh-gap-y-0 { row-gap: 0; }
+.psh-gap-y-xs { row-gap: var(--spacing-xs); }
+.psh-gap-y-sm { row-gap: var(--spacing-sm); }
+.psh-gap-y-md { row-gap: var(--spacing-md); }
+.psh-gap-y-lg { row-gap: var(--spacing-lg); }
+.psh-gap-y-xl { row-gap: var(--spacing-xl); }

package/src/lib/styles/utilities/typography.utils.css

@@ -1,36 +1,36 @@
-/* Utility Classes - Typography */
-
-/* Font size utilities */
-.text-xs { font-size: var(--font-size-xs); }
-.text-sm { font-size: var(--font-size-sm); }
-.text-base { font-size: var(--font-size-base); }
-.text-lg { font-size: var(--font-size-lg); }
-.text-xl { font-size: var(--font-size-xl); }
-.text-2xl { font-size: var(--font-size-2xl); }
-.text-3xl { font-size: var(--font-size-3xl); }
-.text-4xl { font-size: var(--font-size-4xl); }
-
-/* Font weight utilities */
-.font-normal { font-weight: var(--font-weight-normal); }
-.font-medium { font-weight: var(--font-weight-medium); }
-.font-semibold { font-weight: var(--font-weight-semibold); }
-.font-bold { font-weight: var(--font-weight-bold); }
-
-/* Line height utilities */
-.leading-tight { line-height: var(--line-height-tight); }
-.leading-normal { line-height: var(--line-height-normal); }
-.leading-relaxed { line-height: var(--line-height-relaxed); }
-
-/* Letter spacing utilities */
-.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
-.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
-.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
-.tracking-wider { letter-spacing: var(--letter-spacing-wider); }
-.tracking-widest { letter-spacing: var(--letter-spacing-widest); }
-
-/* Text color utilities */
-.text-primary { color: var(--primary-color); }
-.text-secondary { color: var(--text-color-secondary); }
-.text-success { color: var(--success-color); }
-.text-warning { color: var(--warning-color); }
-.text-danger { color: var(--danger-color); }
+/* Utility Classes - Typography */
+
+/* Font size utilities */
+.psh-text-xs { font-size: var(--font-size-xs); }
+.psh-text-sm { font-size: var(--font-size-sm); }
+.psh-text-base { font-size: var(--font-size-base); }
+.psh-text-lg { font-size: var(--font-size-lg); }
+.psh-text-xl { font-size: var(--font-size-xl); }
+.psh-text-2xl { font-size: var(--font-size-2xl); }
+.psh-text-3xl { font-size: var(--font-size-3xl); }
+.psh-text-4xl { font-size: var(--font-size-4xl); }
+
+/* Font weight utilities */
+.psh-font-normal { font-weight: var(--font-weight-normal); }
+.psh-font-medium { font-weight: var(--font-weight-medium); }
+.psh-font-semibold { font-weight: var(--font-weight-semibold); }
+.psh-font-bold { font-weight: var(--font-weight-bold); }
+
+/* Line height utilities */
+.psh-leading-tight { line-height: var(--line-height-tight); }
+.psh-leading-normal { line-height: var(--line-height-normal); }
+.psh-leading-relaxed { line-height: var(--line-height-relaxed); }
+
+/* Letter spacing utilities */
+.psh-tracking-tight { letter-spacing: var(--letter-spacing-tight); }
+.psh-tracking-normal { letter-spacing: var(--letter-spacing-normal); }
+.psh-tracking-wide { letter-spacing: var(--letter-spacing-wide); }
+.psh-tracking-wider { letter-spacing: var(--letter-spacing-wider); }
+.psh-tracking-widest { letter-spacing: var(--letter-spacing-widest); }
+
+/* Text color utilities */
+.psh-text-primary { color: var(--primary-color); }
+.psh-text-secondary { color: var(--text-color-secondary); }
+.psh-text-success { color: var(--success-color); }
+.psh-text-warning { color: var(--warning-color); }
+.psh-text-danger { color: var(--danger-color); }

package/styles.css

@@ -1,33 +1,34 @@
-/* ============================================
-   PS-HELIX DESIGN SYSTEM - LIBRARY STYLESHEET
-   ============================================ */
-
-/* 1. BASE - CSS Reset and Global Styles */
-@import './src/lib/styles/base/reset.css';
-@import './src/lib/styles/base/global.css';
-
-/* 2. DESIGN TOKENS - Primitive Values */
-@import './src/lib/styles/tokens/spacing.tokens.css';
-@import './src/lib/styles/tokens/sizing.tokens.css';
-@import './src/lib/styles/tokens/typography.tokens.css';
-@import './src/lib/styles/tokens/effects.tokens.css';
-@import './src/lib/styles/tokens/animations.tokens.css';
-@import './src/lib/styles/tokens/layout.tokens.css';
-
-/* 3. THEMES - Color Tokens and Theme Variables */
-@import './src/lib/styles/themes/light.css';
-@import './src/lib/styles/themes/dark.css';
-
-/* 4. UTILITY CLASSES - Functional Helpers */
-@import './src/lib/styles/utilities/spacing.utils.css';
-@import './src/lib/styles/utilities/typography.utils.css';
-@import './src/lib/styles/utilities/colors.utils.css';
-@import './src/lib/styles/utilities/layout.utils.css';
-@import './src/lib/styles/utilities/animations.utils.css';
-@import './src/lib/styles/utilities/focus.utils.css';
-@import './src/lib/styles/utilities/responsive.utils.css';
-
-/* Demo navigation scrollbar compensation */
-.demo-navigation {
-  padding-right: var(--scrollbar-width);
-}
+/* ============================================
+   PS-HELIX DESIGN SYSTEM - LIBRARY STYLESHEET
+   ============================================ */
+
+/* 1. BASE - CSS Reset and Global Styles */
+@import './src/lib/styles/base/reset.css';
+@import './src/lib/styles/base/global.css';
+
+/* 2. DESIGN TOKENS - Primitive Values */
+@import './src/lib/styles/tokens/spacing.tokens.css';
+@import './src/lib/styles/tokens/sizing.tokens.css';
+@import './src/lib/styles/tokens/typography.tokens.css';
+@import './src/lib/styles/tokens/effects.tokens.css';
+@import './src/lib/styles/tokens/animations.tokens.css';
+@import './src/lib/styles/tokens/layout.tokens.css';
+@import './src/lib/styles/tokens/breakpoints.tokens.css';
+
+/* 3. THEMES - Color Tokens and Theme Variables */
+@import './src/lib/styles/themes/light.css';
+@import './src/lib/styles/themes/dark.css';
+
+/* 4. UTILITY CLASSES - Functional Helpers */
+@import './src/lib/styles/utilities/spacing.utils.css';
+@import './src/lib/styles/utilities/typography.utils.css';
+@import './src/lib/styles/utilities/colors.utils.css';
+@import './src/lib/styles/utilities/layout.utils.css';
+@import './src/lib/styles/utilities/animations.utils.css';
+@import './src/lib/styles/utilities/focus.utils.css';
+@import './src/lib/styles/utilities/responsive.utils.css';
+
+/* Demo navigation scrollbar compensation */
+.demo-navigation {
+  padding-right: var(--scrollbar-width);
+}