@once-ui-system/core 1.4.32 → 1.5.0

package/dist/styles/position.scss

@@ -1236,4 +1236,314 @@
   .s-right-160 { 
     right: var(--static-space-160);
   }
+}
+
+@include breakpoints.xs {
+  .xs-position-relative {
+    position: relative;
+  }
+
+  .xs-position-fixed {
+    position: fixed;
+  }
+
+  .xs-position-absolute {
+    position: absolute;
+  }
+
+  .xs-position-sticky {
+    position: sticky;
+  }
+
+  .xs-position-static {
+    position: static;
+  }
+
+  .xs-top-0 {
+    top: 0;
+  }
+
+  .xs-left-0 {
+    left: 0;
+  }
+
+  .xs-bottom-0 {
+    bottom: 0;
+  }
+
+  .xs-right-0 {
+    right: 0;
+  }
+
+  .xs-top-1 {
+    top: var(--static-space-1);
+  }
+
+  .xs-left-1 {
+    left: var(--static-space-1);
+  }
+
+  .xs-bottom-1 {
+    bottom: var(--static-space-1);
+  }
+
+  .xs-right-1 {
+    right: var(--static-space-1);
+  }
+
+  .xs-top-2 {
+    top: var(--static-space-2);
+  }
+
+  .xs-left-2 {
+    left: var(--static-space-2);
+  }
+
+  .xs-bottom-2 {
+    bottom: var(--static-space-2);
+  }
+
+  .xs-right-2 {
+    right: var(--static-space-2);
+  }
+
+  .xs-top-4 {
+    top: var(--static-space-4);
+  }
+
+  .xs-left-4 {
+    left: var(--static-space-4);
+  }
+
+  .xs-bottom-4 {
+    bottom: var(--static-space-4);
+  }
+
+  .xs-right-4 {
+    right: var(--static-space-4);
+  }
+
+  .xs-top-8 {
+    top: var(--static-space-8);
+  }
+
+  .xs-left-8 {
+    left: var(--static-space-8);
+  }
+
+  .xs-bottom-8 {
+    bottom: var(--static-space-8);
+  }
+
+  .xs-right-8 {
+    right: var(--static-space-8);
+  }
+
+  .xs-top-12 {
+    top: var(--static-space-12);
+  }
+
+  .xs-left-12 {
+    left: var(--static-space-12);
+  }
+
+  .xs-bottom-12 {
+    bottom: var(--static-space-12);
+  }
+
+  .xs-right-12 {
+    right: var(--static-space-12);
+  }
+
+  .xs-top-16 {
+    top: var(--static-space-16);
+  }
+
+  .xs-left-16 {
+    left: var(--static-space-16);
+  }
+
+  .xs-bottom-16 {
+    bottom: var(--static-space-16);
+  }
+
+  .xs-right-16 {
+    right: var(--static-space-16);
+  }
+
+  .xs-top-20 {
+    top: var(--static-space-20);
+  }
+
+  .xs-left-20 {
+    left: var(--static-space-20);
+  }
+
+  .xs-bottom-20 {
+    bottom: var(--static-space-20);
+  }
+
+  .xs-right-20 {
+    right: var(--static-space-20);
+  }
+
+  .xs-top-24 {
+    top: var(--static-space-24);
+  }
+
+  .xs-left-24 {
+    left: var(--static-space-24);
+  }
+
+  .xs-bottom-24 {
+    bottom: var(--static-space-24);
+  }
+
+  .xs-right-24 {
+    right: var(--static-space-24);
+  }
+
+  .xs-top-32 {
+    top: var(--static-space-32);
+  }
+
+  .xs-left-32 {
+    left: var(--static-space-32);
+  }
+
+  .xs-bottom-32 {
+    bottom: var(--static-space-32);
+  }
+
+  .xs-right-32 {
+    right: var(--static-space-32);
+  }
+
+  .xs-top-40 {
+    top: var(--static-space-40);
+  }
+
+  .xs-left-40 {
+    left: var(--static-space-40);
+  }
+
+  .xs-bottom-40 {
+    bottom: var(--static-space-40);
+  }
+
+  .xs-right-40 {
+    right: var(--static-space-40);
+  }
+
+  .xs-top-48 {
+    top: var(--static-space-48);
+  }
+
+  .xs-left-48 {
+    left: var(--static-space-48);
+  }
+
+  .xs-bottom-48 {
+    bottom: var(--static-space-48);
+  }
+
+  .xs-right-48 {
+    right: var(--static-space-48);
+  }
+
+  .xs-top-56 {
+    top: var(--static-space-56);
+  }
+
+  .xs-left-56 {
+    left: var(--static-space-56);
+  }
+
+  .xs-bottom-56 {
+    bottom: var(--static-space-56);
+  }
+
+  .xs-right-56 {
+    right: var(--static-space-56);
+  }
+
+  .xs-top-64 {
+    top: var(--static-space-64);
+  }
+
+  .xs-left-64 {
+    left: var(--static-space-64);
+  }
+
+  .xs-bottom-64 {
+    bottom: var(--static-space-64);
+  }
+
+  .xs-right-64 {
+    right: var(--static-space-64);
+  }
+
+  .xs-top-80 {
+    top: var(--static-space-80);
+  }
+
+  .xs-left-80 {
+    left: var(--static-space-80);
+  }
+
+  .xs-bottom-80 {
+    bottom: var(--static-space-80);
+  }
+
+  .xs-right-80 {
+    right: var(--static-space-80);
+  }
+
+  .xs-top-104 {
+    top: var(--static-space-104);
+  }
+
+  .xs-left-104 {
+    left: var(--static-space-104);
+  }
+
+  .xs-bottom-104 {
+    bottom: var(--static-space-104);
+  }
+
+  .xs-right-104 {
+    right: var(--static-space-104);
+  }
+
+  .xs-top-128 {
+    top: var(--static-space-128);
+  }
+
+  .xs-left-128 {
+    left: var(--static-space-128);
+  }
+
+  .xs-bottom-128 {
+    bottom: var(--static-space-128);
+  }
+
+  .xs-right-128 {
+    right: var(--static-space-128);
+  }
+
+  .xs-top-160 {
+    top: var(--static-space-160);
+  }
+
+  .xs-left-160 {
+    left: var(--static-space-160);
+  }
+
+  .xs-bottom-160 {
+    bottom: var(--static-space-160);
+  }
+
+  .xs-right-160 {
+    right: var(--static-space-160);
+  }
 }

package/dist/styles/typography.scss

@@ -19,6 +19,12 @@ html {
     }
 }
 
+@include breakpoints.xs {
+    html {
+        font-size: var(--font-scaling-mobile);
+    }
+}
+
 h1, h2, h3, h4, h5, h6, p {
     margin: 0;
 }
@@ -43,32 +49,32 @@ h1, h2, h3, h4, h5, h6, p {
     }
 
     &.font-xl, & > .font-xl {
-        font-size:   calc(var(--font-size-display-xl) * var(--font-size-heading-multiplier));
-        line-height: calc(var(--line-height-display-xl) * var(--line-height-heading-multiplier));
+        font-size:   calc(var(--font-size-display-xl) * var(--font-size-display-multiplier));
+        line-height: calc(var(--line-height-display-xl) * var(--line-height-display-multiplier));
         letter-spacing: -0.05em;
     }
     
     &.font-l, & > .font-l {
-        font-size:   calc(var(--font-size-display-l) * var(--font-size-heading-multiplier));
-        line-height: calc(var(--line-height-display-l) * var(--line-height-heading-multiplier));
+        font-size:   calc(var(--font-size-display-l) * var(--font-size-display-multiplier));
+        line-height: calc(var(--line-height-display-l) * var(--line-height-display-multiplier));
         letter-spacing: -0.04em;
     }
     
     &.font-m, & > .font-m {
-        font-size:   calc(var(--font-size-display-m) * var(--font-size-heading-multiplier));
-        line-height: calc(var(--line-height-display-m) * var(--line-height-heading-multiplier));
+        font-size:   calc(var(--font-size-display-m) * var(--font-size-display-multiplier));
+        line-height: calc(var(--line-height-display-m) * var(--line-height-display-multiplier));
         letter-spacing: -0.03em;
     }
     
     &.font-s, & > .font-s {
-        font-size:   calc(var(--font-size-display-s) * var(--font-size-heading-multiplier));
-        line-height: calc(var(--line-height-display-s) * var(--line-height-heading-multiplier));
+        font-size:   calc(var(--font-size-display-s) * var(--font-size-display-multiplier));
+        line-height: calc(var(--line-height-display-s) * var(--line-height-display-multiplier));
         letter-spacing: -0.02em;
     }
 
     &.font-xs, & > .font-xs {
-        font-size:   calc(var(--font-size-display-xs) * var(--font-size-heading-multiplier));
-        line-height: calc(var(--line-height-display-xs) * var(--line-height-heading-multiplier));
+        font-size:   calc(var(--font-size-display-xs) * var(--font-size-display-multiplier));
+        line-height: calc(var(--line-height-display-xs) * var(--line-height-display-multiplier));
     }
 }
 
@@ -157,6 +163,11 @@ h1, h2, h3, h4, h5, h6, p {
         font-weight: var(--font-weight-label-default);
     }
 
+    &.font-xl, & > .font-xl {
+        font-size:   calc(var(--font-size-label-xl) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-xl) * var(--line-height-label-multiplier));
+    }
+
     &.font-l, & > .font-l {
         font-size:   calc(var(--font-size-label-l) * var(--font-size-label-multiplier));
         line-height: calc(var(--line-height-label-l) * var(--line-height-label-multiplier));
@@ -171,6 +182,11 @@ h1, h2, h3, h4, h5, h6, p {
         font-size:   calc(var(--font-size-label-s) * var(--font-size-label-multiplier));
         line-height: calc(var(--line-height-label-s) * var(--line-height-label-multiplier));
     }
+
+    &.font-xs, & > .font-xs {
+        font-size:   calc(var(--font-size-label-xs) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-xs) * var(--line-height-label-multiplier));
+    }
 }
 
 .font-code {
@@ -184,6 +200,11 @@ h1, h2, h3, h4, h5, h6, p {
         font-weight: var(--font-weight-code-default);
     }
 
+    &.font-xl, & > .font-xl {
+        font-size:   calc(var(--font-size-label-xl) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-xl) * var(--line-height-label-multiplier));
+    }
+
     &.font-l, & > .font-l {
         font-size:   calc(var(--font-size-label-l) * var(--font-size-label-multiplier));
         line-height: calc(var(--line-height-label-l) * var(--line-height-label-multiplier));
@@ -198,4 +219,9 @@ h1, h2, h3, h4, h5, h6, p {
         font-size:   calc(var(--font-size-label-s) * var(--font-size-label-multiplier));
         line-height: calc(var(--line-height-label-s) * var(--line-height-label-multiplier));
     }
+
+    &.font-xs, & > .font-xs {
+        font-size:   calc(var(--font-size-label-xs) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-xs) * var(--line-height-label-multiplier));
+    }
 }

package/dist/tokens/border.scss

@@ -13,13 +13,13 @@
     
     --radius-l:         1rem;
     --radius-l-nest-4:  1.25rem;
-    --radius-l-nest-8:  1.75rem;
+    --radius-l-nest-8:  1.625rem;
 
     --radius-xl:        1.25rem;
     --radius-xl-nest-4: 1.5rem;
     --radius-xl-nest-8: 1.875rem;
 
-    --radius-full:       999rem;
+    --radius-full:      999rem;
 }
 
 [data-border="conservative"] {
@@ -43,7 +43,7 @@
     --radius-xl-nest-4: 1rem;
     --radius-xl-nest-8: 1.25rem;
 
-    --radius-full:       999rem;
+    --radius-full:      999rem;
 }
 
 [data-border="rounded"] {
@@ -67,5 +67,29 @@
     --radius-xl-nest-4: 2.25rem;
     --radius-xl-nest-8: 2.75rem;
 
-    --radius-full:       999rem;
+    --radius-full:      999rem;
+}
+
+[data-border="sharp"] {
+    --radius-xs:        0;
+    --radius-xs-nest-4: 0;
+    --radius-xs-nest-8: 0;
+
+    --radius-s:         0;
+    --radius-s-nest-4:  0;
+    --radius-s-nest-8:  0;
+
+    --radius-m:         0;
+    --radius-m-nest-4:  0;
+    --radius-m-nest-8:  0;
+    
+    --radius-l:         0;
+    --radius-l-nest-4:  0;
+    --radius-l-nest-8:  0;
+
+    --radius-xl:        0;
+    --radius-xl-nest-4: 0;
+    --radius-xl-nest-8: 0;
+
+    --radius-full:      999rem;
 }

package/dist/tokens/theme.scss

@@ -4,10 +4,12 @@
     --font-label:   var(--font-label);
     --font-code:    var(--font-code);
 
+    --font-size-display-multiplier:   1;
     --font-size-heading-multiplier:   1;
     --font-size-body-multiplier:      1;
     --font-size-label-multiplier:     1;
 
+    --line-height-display-multiplier: 1;
     --line-height-heading-multiplier: 1;
     --line-height-body-multiplier:    1;
     --line-height-label-multiplier:   1;

package/dist/tokens/typography.scss

@@ -41,9 +41,11 @@
     --font-size-body-s:            0.875rem;
     --font-size-body-xs:           0.75rem;
 
+    --font-size-label-xl:          1.125rem;
     --font-size-label-l:           1rem;
     --font-size-label-m:           0.925rem;
     --font-size-label-s:           0.825rem;
+    --font-size-label-xs:          0.75rem;
 
     /* LINE HEIGHT */
     --line-height-display-xl:      5rem;
@@ -64,9 +66,11 @@
     --line-height-body-s:          1.125rem;
     --line-height-body-xs:         1rem;
 
+    --line-height-label-xl:        1.5rem;
     --line-height-label-l:         1.25rem;
     --line-height-label-m:         1.25rem;
     --line-height-label-s:         1rem;
+    --line-height-label-xs:        0.875rem;
 }
 
 @include breakpoints.m {
@@ -105,7 +109,7 @@
     
         /* LINE HEIGHT */
         --line-height-display-xl:  3rem;
-        --line-height-display-l:   3rem;
+        --line-height-display-l:   2.75rem;
         --line-height-display-m:   2.5rem;
         --line-height-display-s:   2.5rem;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@once-ui-system/core",
-  "version": "1.4.32",
+  "version": "1.5.0",
   "description": "Once UI for Next.js NPM package",
   "keywords": [
     "once-ui",
@@ -13,6 +13,15 @@
   ],
   "author": "Once UI",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/once-ui-system/core.git",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/once-ui-system/core/issues"
+  },
+  "homepage": "https://docs.once-ui.com",
   "main": "dist/index.js",
   "exports": {
     ".": {

package/README.md

@@ -1,159 +0,0 @@
-# Once UI
-
-A design system for indie builders who move fast and break limits without neglecting quality. Once UI combines the simplicity of low-code with the power of code: write 70% less compared to shadcn + tailwind.
-
-* **Customization**: Manage design config with the ThemeProvider context.
-* **Components**: Access advanced components with simple APIs.
-* **Data-viz**: Add responsive charts with a few lines of code.
-* **SEO**: Use SEO components to simplify meta and schema setup.
-
-## Installation
-
-```bash
-npm install @once-ui-system/core
-# or
-yarn add @once-ui-system/core
-# or
-pnpm add @once-ui-system/core
-```
-
-## Documentation
-
-Learn how to build with Once UI at [docs.once-ui.com](https://docs.once-ui.com/once-ui/quick-start).
-
-## Setup
-
-Import styles and tokens in your root layout file:
-
-```js
-// Import the pre-compiled CSS files
-import '@once-ui-system/core/css/styles.css';
-import '@once-ui-system/core/css/tokens.css';
-```
-
-Create a `Providers.tsx` component:
-
-```js
-"use client";
-
-import { DataThemeProvider, IconProvider, ThemeProvider, ToastProvider } from "@once-ui-system/core";
-
-export function Providers({ children }: { children: React.ReactNode }) {
-  return (
-    <ThemeProvider>
-      <DataThemeProvider>
-        <ToastProvider>
-          <IconProvider>
-            {children}
-          </IconProvider>
-        </ToastProvider>
-      </DataThemeProvider>
-    </ThemeProvider>
-  );
-}
-```
-
-Wrap your app with the `Providers` component in your root layout:
-
-```js
-import { Providers } from "./providers";
-
-export default function RootLayout({ children }: { 
-  children: React.ReactNode 
-}) {
-  return (
-    <Providers>
-      {children}
-    </Providers>
-  );
-}
-```
-
-Prevent flash of unstyled content (FOUC) by adding the following script to the `<head>` of your root layout:
-
-```js
-<head>
-  <script
-    dangerouslySetInnerHTML={{
-      __html: `
-        (function() {
-          try {
-            const root = document.documentElement;
-            
-            const defaultTheme = 'system';
-            root.setAttribute('data-neutral', 'gray');
-            root.setAttribute('data-brand', 'blue');
-            root.setAttribute('data-accent', 'indigo');
-            root.setAttribute('data-solid', 'contrast');
-            root.setAttribute('data-solid-style', 'flat');
-            root.setAttribute('data-border', 'playful');
-            root.setAttribute('data-surface', 'filled');
-            root.setAttribute('data-transition', 'all');
-            root.setAttribute('data-scaling', '100');
-            root.setAttribute('data-viz-style', 'categorical');
-            
-            const resolveTheme = (themeValue) => {
-              if (!themeValue || themeValue === 'system') {
-                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-              }
-              return themeValue;
-            };
-            
-            const theme = localStorage.getItem('data-theme');
-            const resolvedTheme = resolveTheme(theme);
-            root.setAttribute('data-theme', resolvedTheme);
-            
-            const styleKeys = ['neutral', 'brand', 'accent', 'solid', 'solid-style', 'viz-style', 'border', 'surface', 'transition', 'scaling'];
-            styleKeys.forEach(key => {
-              const value = localStorage.getItem('data-' + key);
-              if (value) {
-                root.setAttribute('data-' + key, value);
-              }
-            });
-          } catch (e) {
-            document.documentElement.setAttribute('data-theme', 'dark');
-          }
-        })();
-      `,
-    }}
-  />
-</head>
-```
-
-## Quick start
-
-[Magic Portfolio](https://once-ui.com/products/magic-portfolio): Our free portfolio starter used and loved by thousands of creatives. Simple, customizable, responsive.
-
-[Magic Store](https://once-ui.com/products/magic-store) (PRO): Our premium ecommerce storefront that lets you launch your merch store in minutes. Payment, production and shipping managed by Fourthwall.
-
-[Magic Docs](https://once-ui.com/products/magic-docs) (PRO): Our premium documentation generator. Just add your MDX files and let Magic Docs handle the rest.
-
-[Magic Bio](https://once-ui.com/products/magic-bio) (PRO): Our premium link-in-bio template that automatically fetches open-graph data. Just add your links and deploy.
-
-[Once UI Blocks](https://once-ui.com/blocks) (PRO): Copy-paste pre-designed blocks and deploy fully-functional sites with lightning speed.
-
-[Once UI for Figma](https://once-ui.com/figma) (PRO): Design and prototype entire products from scratch in hours.
-
-## Creators
-
-Connect with us!
-
-**Lorant One**: [Portfolio](https://lorant.one) / [Threads](https://www.threads.net/@lorant.one) / [LinkedIn](https://www.linkedin.com/in/lorant-one/)
-
-**Zsofia Komaromi**: [Portfolio](https://zsofia.pro) / [Threads](https://www.threads.net/@zsofia_kom) / [LinkedIn](https://www.linkedin.com/in/zsofiakomaromi/)
-
-## Become a Oncer
-
-![Design Engineers Club](https://docs.once-ui.com/images/docs/vibe-coding-dark.jpg)
-
-Join the [Design Engineers Club](https://discord.com/invite/5EyAQ4eNdS) on Discord to connect with us and share your projects.
-
-Found a bug? Report it [here](https://github.com/once-ui-system/once-ui/issues/new?labels=bug&template=bug_report.md). Got a feature request? Submit it [here](https://github.com/once-ui-system/once-ui/issues/new?labels=feature%20request&template=feature_request.md).
-
-## Sponsors
-
-Once UI is an indie project. [Sponsor us](https://github.com/sponsors/once-ui-system) and get featured on our site!
-
-## License
-
-Distributed under the MIT License. See `LICENSE.txt` for more information.