Nimiq CSS lib

.vitepress/sidebar.config.ts

@@ -161,6 +161,20 @@ export const sidebar: DefaultTheme.Sidebar = {
             { text: 'Cards', link: '/build/ui/css-framework/cards' },
           ],
         },
+        {
+          text: 'Utilities',
+          items: [
+            { text: 'Arrow Links', link: '/build/ui/utilities/arrow-links' },
+            { text: 'Borders', link: '/build/ui/utilities/borders' },
+            { text: 'Buttons', link: '/build/ui/utilities/buttons' },
+            { text: 'Curtain', link: '/build/ui/utilities/curtain' },
+            { text: 'Flex Cards', link: '/build/ui/utilities/flex-cards' },
+            { text: 'Inputs', link: '/build/ui/utilities/inputs' },
+            { text: 'Pills', link: '/build/ui/utilities/pills' },
+            { text: 'Switch', link: '/build/ui/utilities/switch' },
+            { text: 'Texts', link: '/build/ui/utilities/texts' },
+          ],
+        },
       ],
     },
   ],

build/ui/utilities/arrow-links.md

@@ -0,0 +1,37 @@
+# Arrow Links
+
+TODO: Write here a description
+
+<div flex mt-32>
+  <a href='./' class='arrow-back'>Arrow back</a>
+  <a href='https://nimiq.com/' target="_blank" rel="noopener" class='arrow'>External link</a>
+  <a href='../design/logo' class='arrow'>Internal link</a>
+</div>
+
+```html
+<a href='./' class='arrow-back'>Arrow back</a>
+<a href='https://nimiq.com/' class='arrow'>External link</a>
+<a href='/design/logo' class='arrow'>Internal link</a>
+```
+<br>
+You can even nest the arrow in a `tag` element
+
+<div flex justify-center mt-32>
+  <a href='https://nimiq.com/' target="_blank" rel="noopener" class='flex flex-col gap-12 px-24 py-16 raw bg-neutral-200 rounded-8 max-w-320'>
+    <h3 class='flex items-center arrow after:ml-auto'>External link</h3>
+    <p class='text-12 text-neutral-800 text-pretty'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  </a>
+</div>
+
+```html
+<!-- Using TailwindCSS classes -->
+
+<a href='https://nimiq.com/' class='flex flex-col gap-3 px-6 py-4 raw bg-neutral-200 rounded-2'>
+  <h3 class='flex items-center arrow after:ml-auto'>
+    External link
+  </h3>
+  <p class='text-3 text-neutral-800 text-pretty'>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </p>
+</a>
+```

build/ui/utilities/borders.md

@@ -0,0 +1,34 @@
+# Borders
+
+TODO: Write here a description
+
+If using Tailwind/UnoCSS is recommended to use just `ring-{COLOR}`. For example: `ring-neutral-700`
+No need to do `ring-neutral-700 ring-1`
+
+## Full Border
+
+<div flex mt-32>
+  <div size-64 rounded-2 grid place-content-center border-base>Box</div>
+</div>
+
+```html
+<div class="border-base ...">Box</div>
+```
+
+## One side Border
+
+<div flex justify-center mt-32>
+  <div p-8 border-top>Border Top</div>
+  <div p-8 border-right>Border Right</div>
+  <div p-8 border-bottom>Border Bottom</div>
+  <div p-8 border-left>Border Left</div>
+</div>
+
+```html
+<!-- Using TailwindCSS classes -->
+
+<div class="p-2 border-top">Border Top</div>
+<div class="p-2 border-right">Border Right</div>
+<div class="p-2 border-bottom">Border Bottom</div>
+<div class="p-2 border-left">Border Left</div>
+```

build/ui/utilities/buttons.md

@@ -0,0 +1,17 @@
+# Buttons
+
+TODO: Write here a description
+
+<div flex mt-32>
+  <button text-32 close-btn></button>
+  <button ghost-btn mx-auto text-16>SVG</button>
+</div>
+
+```html
+<button class="close-btn"></button>
+<button class="ghost-btn">SVG</button>
+```
+
+<br>
+
+You can also use [*pills*](pills) as buttons

build/ui/utilities/curtain.md

@@ -0,0 +1,33 @@
+# Curtain
+
+You can use the class `curtain-y` to add the curtains. You can change the height of the curtain using `--mask-size`
+
+Only works if the browser supports [animation-timeline](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline#browser_compatibility)
+
+<div mt-32 prose curtain-y max-h-384 of-auto>
+  <p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet ligula in tortor suscipit dictum. Etiam aliquet eros est, a varius velit vestibulum imperdiet. Vestibulum pellentesque a est eu accumsan. Mauris sodales lorem vel ipsum tempus vestibulum. Quisque lectus nunc, imperdiet non mattis vitae, dignissim et eros. Ut semper ipsum ut odio euismod dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam nec lectus lacus. Phasellus dui mauris, rhoncus in dapibus eget, mollis eget sapien. Suspendisse vel massa orci. Duis lobortis leo ac elementum vulputate. In hac habitasse platea dictumst. Sed feugiat ac nibh ullamcorper venenatis. Praesent pellentesque leo facilisis, auctor augue non, posuere mauris. Cras dignissim condimentum volutpat. Sed pretium mattis quam, in blandit massa finibus eu.
+
+  Suspendisse sed facilisis leo. Cras eu turpis eu turpis pellentesque bibendum. Praesent molestie lorem quis cursus tempus. Vivamus et augue sollicitudin, tincidunt ante sit amet, consequat massa. Nulla lobortis vitae felis ac tristique. Ut sit amet diam malesuada odio vehicula cursus. Nullam interdum nisi quis nibh viverra rutrum. Phasellus tempor at sem vitae elementum. Ut quis aliquam nibh.
+
+  Nulla orci lacus, accumsan sit amet efficitur suscipit, feugiat in nisi. Ut vitae ante tempus, suscipit sapien sit amet, eleifend urna. Quisque dapibus lorem non facilisis blandit. Mauris at sagittis elit. Proin laoreet nec ex ut interdum. Nam maximus dignissim urna. Quisque et diam sit amet felis egestas tincidunt et sit amet velit. Morbi quis facilisis augue, vel egestas risus. Nulla finibus arcu eu convallis tristique. Cras id dui ac massa rutrum egestas ac vel ipsum.
+
+  Curabitur a ex ultrices, tempor mi nec, placerat odio. Suspendisse neque lorem, fringilla ac ligula sed, vehicula suscipit enim. Aliquam ultrices quam in mi commodo, ut dapibus tortor ornare. Aliquam a euismod elit. Duis interdum sapien dapibus nibh fringilla, id condimentum ante semper. Nullam sagittis ac lectus vel semper. Praesent blandit magna quis enim porttitor consequat. Nullam non ante vestibulum, pellentesque nulla in, imperdiet lectus. Nulla eleifend viverra aliquam. Aliquam suscipit aliquet risus ut aliquet. Proin sagittis tellus vel est imperdiet, sit amet molestie lectus maximus.
+  </p>
+</div>
+
+```html
+<!-- Using TailwindCSS classes -->
+
+<div class='prose curtain-y max-h-96 of-auto'>
+  <p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet ligula in tortor suscipit dictum. Etiam aliquet eros est, a varius velit vestibulum imperdiet. Vestibulum pellentesque a est eu accumsan. Mauris sodales lorem vel ipsum tempus vestibulum. Quisque lectus nunc, imperdiet non mattis vitae, dignissim et eros. Ut semper ipsum ut odio euismod dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam nec lectus lacus. Phasellus dui mauris, rhoncus in dapibus eget, mollis eget sapien. Suspendisse vel massa orci. Duis lobortis leo ac elementum vulputate. In hac habitasse platea dictumst. Sed feugiat ac nibh ullamcorper venenatis. Praesent pellentesque leo facilisis, auctor augue non, posuere mauris. Cras dignissim condimentum volutpat. Sed pretium mattis quam, in blandit massa finibus eu.
+
+  Suspendisse sed facilisis leo. Cras eu turpis eu turpis pellentesque bibendum. Praesent molestie lorem quis cursus tempus. Vivamus et augue sollicitudin, tincidunt ante sit amet, consequat massa. Nulla lobortis vitae felis ac tristique. Ut sit amet diam malesuada odio vehicula cursus. Nullam interdum nisi quis nibh viverra rutrum. Phasellus tempor at sem vitae elementum. Ut quis aliquam nibh.
+
+  Nulla orci lacus, accumsan sit amet efficitur suscipit, feugiat in nisi. Ut vitae ante tempus, suscipit sapien sit amet, eleifend urna. Quisque dapibus lorem non facilisis blandit. Mauris at sagittis elit. Proin laoreet nec ex ut interdum. Nam maximus dignissim urna. Quisque et diam sit amet felis egestas tincidunt et sit amet velit. Morbi quis facilisis augue, vel egestas risus. Nulla finibus arcu eu convallis tristique. Cras id dui ac massa rutrum egestas ac vel ipsum.
+
+  Curabitur a ex ultrices, tempor mi nec, placerat odio. Suspendisse neque lorem, fringilla ac ligula sed, vehicula suscipit enim. Aliquam ultrices quam in mi commodo, ut dapibus tortor ornare. Aliquam a euismod elit. Duis interdum sapien dapibus nibh fringilla, id condimentum ante semper. Nullam sagittis ac lectus vel semper. Praesent blandit magna quis enim porttitor consequat. Nullam non ante vestibulum, pellentesque nulla in, imperdiet lectus. Nulla eleifend viverra aliquam. Aliquam suscipit aliquet risus ut aliquet. Proin sagittis tellus vel est imperdiet, sit amet molestie lectus maximus.
+  </p>
+</div>
+```

build/ui/utilities/flex-cards.md

@@ -0,0 +1,29 @@
+# Flex Cards
+
+TODO: Write here a description
+
+<div flex-card mt-32>
+  <h2 mt-0>An awesome card</h2>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet ligula in tortor suscipit dictum.</p>
+</div>
+
+```html
+<div class="flex-card">
+  <span>An awesome card</span>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet ligula in tortor suscipit dictum.</p>
+</div>
+```
+<br>
+Links can be added to the card, converting the card into a clickable element
+
+<a href='https://nimiq.com/' target="_blank" rel="noopener" flex-card mt-32>
+  <h2 mt-0>An awesome card</h2>
+  <p class="raw">with a link!</p>
+</a>
+
+```html
+<a href='https://nimiq.com/' class="flex-card">
+  <h2>An awesome card</h2>
+  <p>with a link!</p>
+</a>
+```

build/ui/utilities/index.md

@@ -0,0 +1,13 @@
+# Utilities
+
+Everything works with **dark mode** out of the box
+
+- [Arrow Links](arrow-links)
+- [Borders](borders)
+- [Buttons](buttons)
+- [Curtain](curtain)
+- [Flex Cards](flex-cards)
+- [Inputs](inputs)
+- [Pills](pills)
+- [Switch](switch)
+- [Texts](texts)

build/ui/utilities/inputs.md

@@ -0,0 +1,30 @@
+# Inputs
+
+TODO: Write here a description
+
+## Generic Input
+<div flex mt-32>
+  <input type='text' class='input-box' rounded-full min-w-240 w-fit placeholder='Hey, hello :)' />
+</div>
+
+```html
+<input type='text' class='rounded-full input-box' placeholder='Hey, hello :)' />
+```
+
+## Invalid Input
+<div flex mt-32>
+  <input type='text' class='input-box invalid' rounded-full min-w-240 w-fit value='Something bad' />
+</div>
+
+```html
+<input type='text' class='rounded-full input-box invalid' value='Something bad' />
+```
+
+## Textarea
+<div flex mt-32>
+  <textarea class='input-box' rounded-3 min-w-240 w-fit placeholder='Hey, hello :)' />
+</div>
+
+```html
+<textarea class='input-box rounded-[3px]' placeholder='Hey, hello :)' />
+```

build/ui/utilities/pills.md

@@ -0,0 +1,92 @@
+# Pills
+
+TODO: Write here a description
+
+<div flex mt-32>
+  <a href='./' class='pill-blue'>Blue Pill</a>
+  <a href='./' class='pill-green'>Green Pill</a>
+  <a href='./' class='pill-orange'>Orange Pill</a>
+  <a href='./' class='pill-red'>Red Pill</a>
+  <a href='./' class='pill-gold'>Gold Pill</a>
+</div>
+
+```html
+<a href='./' class='pill-blue'>Blue Pill</a>
+<a href='./' class='pill-green'>Green Pill</a>
+<a href='./' class='pill-orange'>Orange Pill</a>
+<a href='./' class='pill-red'>Red Pill</a>
+<a href='./' class='pill-gold'>Gold Pill</a>
+```
+
+## Small Pills
+
+<div flex mt-32>
+  <a href='./' class='pill-blue pill-sm'>Blue Pill</a>
+  <a href='./' class='pill-green pill-sm'>Green Pill</a>
+  <a href='./' class='pill-orange pill-sm'>Orange Pill</a>
+  <a href='./' class='pill-red pill-sm'>Red Pill</a>
+  <a href='./' class='pill-gold pill-sm'>Gold Pill</a>
+</div>
+
+```html
+<a href='./' class='pill-blue pill-sm'>Blue Pill</a>
+<a href='./' class='pill-green pill-sm'>Green Pill</a>
+<a href='./' class='pill-orange pill-sm'>Orange Pill</a>
+<a href='./' class='pill-red pill-sm'>Red Pill</a>
+<a href='./' class='pill-gold pill-sm'>Gold Pill</a>
+```
+
+## Large Pills
+<div flex flex-wrap gap-12 children:text-nowrap class="children:flex-[1_0_30%]">
+  <a href='./' class='pill-bold pill-blue'>Large Blue Pill</a>
+  <a href='./' class='pill-bold pill-green'>Large Green Pill</a>
+  <a href='./' class='pill-bold pill-orange'>Large Orange Pill</a>
+  <a href='./' class='pill-bold pill-red'>Large Red Pill</a>
+  <a href='./' class='pill-bold pill-gold'>Large Gold Pill</a>
+</div>
+
+```html
+<a href='./' class='pill-bold pill-blue'>Large Blue Pill</a>
+<a href='./' class='pill-bold pill-green'>Large Green Pill</a>
+<a href='./' class='pill-bold pill-orange'>Large Orange Pill</a>
+<a href='./' class='pill-bold pill-red'>Large Red Pill</a>
+<a href='./' class='pill-bold pill-gold'>Large Gold Pill</a>
+```
+
+## Variants
+<div flex flex-wrap gap-12 items-center mt-32>
+  <a href='./' class='pill-secondary'>Secondary Pill</a>
+  <a href='./' class='pill-secondary pill-sm'>Secondary Small Pill</a>
+  <a href='./' class='col-span-2 max-w-320 pill-secondary pill-bold'>Secondary Large Pill</a>
+</div>
+
+```html
+<a href='./' class='pill-secondary'>Secondary Pill</a>
+<a href='./' class='pill-secondary pill-sm'>Secondary Small Pill</a>
+<a href='./' class='pill-secondary pill-bold'>Secondary Large Pill</a>
+```
+
+## Combining with other utilities
+
+You can combine pills with other utilities like `arrow`, `loading`, `label`...
+
+<a href='./' class='pill-blue pill-sm arrow' mt-32>Pill with arrow</a>
+
+```html
+<a href='./' class='pill-blue pill-sm arrow'>Pill with arrow</a>
+```
+<div flex mt-32>
+  <a href='./' class='pill-secondary loading pill-sm' disabled>Loading</a>
+  <a href='./' class='pill-secondary not-loading pill-sm'>Loading</a>
+</div>
+
+```html
+<a href='./' class='pill-secondary loading pill-sm disabled'>Loading</a>
+<a href='./' class='pill-secondary not-loading pill-sm'>Loading</a>
+```
+
+<a href='./' class='pill-bold pill-green label' mt-32 max-w-320>Awesome</a>
+
+```html
+<a href='./' class='pill-bold pill-green label'>Awesome</a>
+```

build/ui/utilities/switch.md

@@ -0,0 +1,27 @@
+# Switch
+
+TODO: Write here a description
+
+You can modify the size of the switch using `font-size`
+
+<div flex mt-32>
+  <input type='checkbox' switch />
+  <input type='checkbox' switch style='font-size: 24px' />
+</div>
+
+```html
+<input type='checkbox' class="switch" />
+<input type='checkbox' class="switch" style='font-size: 24px' />
+```
+<br>
+Switches can also be disabled
+
+<div flex mt-32>
+  <input type='checkbox' switch disabled />
+  <input type='checkbox' switch disabled style='font-size: 24px' />
+</div>
+
+```html
+<input type='checkbox' class="switch disabled" />
+<input type='checkbox' class="switch disabled" style='font-size: 24px' />
+```

build/ui/utilities/texts.md

@@ -0,0 +1,21 @@
+# Texts
+
+TODO: Write here a description
+
+<p subline mt-32>An awesome subline</p>
+
+```html
+<p class="subline">An awesome subline</p>
+```
+
+<p label text-12 mt-32>Build</p>
+
+```html
+<!-- Using TailwindCSS classes -->
+
+<p class="label text-3">Build</p>
+```
+
+<br>
+
+You may want to check the [Typography](/build/ui/design/typography/) section for more text styles.

package.json

@@ -30,7 +30,7 @@
     "jszip": "^3.10.1",
     "markdown-it-mathjax3": "^4.3.2",
     "medium-zoom": "^1.1.0",
-    "nimiq-css": "^0.0.95",
+    "nimiq-css": "^0.0.99",
     "prettier": "^3.2.5",
     "radix-vue": "^1.6.2",
     "svg-packer": "^0.0.3",