@apolitical/component-library 8.3.7 → 8.3.8-ac.1

package/styles/base/_blockquotes.scss

@@ -21,7 +21,7 @@ $blockquote: (
 @layer base {
   blockquote {
     margin: px-to-rem(get-map($blockquote, 'margin-top')) 0
-      px-to-rem(get-map($blockquote, 'margin-bottom')) 0;
+      px-to-rem(get-map($blockquote, 'margin-bottom'));
     padding: px-to-rem(get-map($blockquote, 'padding-vertical')) 0 0
       px-to-rem(get-map($blockquote, 'padding-left'));
     font-size: px-to-rem(get-map($blockquote, 'font-size'));

package/styles/base/_lists.scss

@@ -18,7 +18,7 @@ $li: (
 @layer base {
   ol,
   ul {
-    margin: 0 0 px-to-rem(get-map($ul, 'margin-bottom')) 0;
+    margin: 0 0 px-to-rem(get-map($ul, 'margin-bottom'));
     padding-left: px-to-rem(get-map($ul, 'padding-left'));
     display: block;
 

package/styles/base/_table.scss

@@ -13,7 +13,7 @@ $table: (
   table {
     width: 100%;
     margin: px-to-rem(get-map($table, 'margin-top')) auto
-      px-to-rem(get-map($table, 'margin-bottom')) auto;
+      px-to-rem(get-map($table, 'margin-bottom'));
     border-collapse: separate;
     border-spacing: 0;
     display: table;

package/styles/base/_titles.scss

@@ -186,8 +186,7 @@ $count-icon: (
 }
 
 @mixin h2 {
-  margin: px-to-rem(get-map($h2, 'margin-top')) 0 px-to-rem(get-map($h2, 'margin-bottom'))
-    0;
+  margin: px-to-rem(get-map($h2, 'margin-top')) 0 px-to-rem(get-map($h2, 'margin-bottom'));
   font-size: px-to-rem(get-map($h2, 'font-size'));
   color: get-map($theme, 'title');
   text-transform: none;
@@ -201,8 +200,7 @@ $count-icon: (
 }
 
 @mixin h3 {
-  margin: px-to-rem(get-map($h3, 'margin-top')) 0 px-to-rem(get-map($h3, 'margin-bottom'))
-    0;
+  margin: px-to-rem(get-map($h3, 'margin-top')) 0 px-to-rem(get-map($h3, 'margin-bottom'));
   font-size: px-to-rem(get-map($h3, 'font-size'));
   color: get-map($theme, 'title');
   text-transform: none;
@@ -225,8 +223,7 @@ $count-icon: (
 }
 
 @mixin h4 {
-  margin: px-to-rem(get-map($h4, 'margin-top')) 0 px-to-rem(get-map($h4, 'margin-bottom'))
-    0;
+  margin: px-to-rem(get-map($h4, 'margin-top')) 0 px-to-rem(get-map($h4, 'margin-bottom'));
   font-size: px-to-rem(get-map($h4, 'font-size'));
   color: get-map($theme, 'title');
   text-transform: none;
@@ -240,8 +237,7 @@ $count-icon: (
 }
 
 @mixin h5 {
-  margin: px-to-rem(get-map($h5, 'margin-top')) 0 px-to-rem(get-map($h5, 'margin-bottom'))
-    0;
+  margin: px-to-rem(get-map($h5, 'margin-top')) 0 px-to-rem(get-map($h5, 'margin-bottom'));
   font-size: px-to-rem(get-map($h5, 'font-size'));
   color: get-map($theme, 'title');
   text-transform: uppercase;

package/styles/base/buttons/_button-wrapper.scss

@@ -18,7 +18,6 @@ $button-wrapper-button: (
     > button,
     > .button {
       margin: 0 px-to-rem(get-map($button-wrapper-button, 'margin'))
-        px-to-rem(get-map($button-wrapper-button, 'margin'))
         px-to-rem(get-map($button-wrapper-button, 'margin'));
     }
 

package/styles/base/buttons/_buttons.scss

@@ -10,8 +10,7 @@
     background: get-map($theme, 'button_primary_bg');
     padding: px-to-rem(get-map($button-medium, 'padding-top'))
       px-to-rem(get-map($button-medium, 'padding-horizontal'))
-      px-to-rem(get-map($button-medium, 'padding-bottom'))
-      px-to-rem(get-map($button-medium, 'padding-horizontal'));
+      px-to-rem(get-map($button-medium, 'padding-bottom'));
     position: relative;
     text-align: center;
     font-size: px-to-rem(get-map($button-medium, 'font-size'));
@@ -50,8 +49,7 @@
       background: get-map($theme, 'button_new_primary_bg');
       padding: px-to-rem(get-map($button-medium, 'padding-top_new'))
         px-to-rem(get-map($button-medium, 'padding-horizontal_new'))
-        px-to-rem(get-map($button-medium, 'padding-bottom_new'))
-        px-to-rem(get-map($button-medium, 'padding-horizontal_new'));
+        px-to-rem(get-map($button-medium, 'padding-bottom_new'));
       color: get-map($theme, 'button_primary');
 
       &:hover,
@@ -66,16 +64,14 @@
       &.#{$size} {
         padding: px-to-rem(get-map($styles, 'padding-top'))
           px-to-rem(get-map($styles, 'padding-horizontal'))
-          px-to-rem(get-map($styles, 'padding-bottom'))
-          px-to-rem(get-map($styles, 'padding-horizontal'));
+          px-to-rem(get-map($styles, 'padding-bottom'));
         font-size: px-to-rem(get-map($styles, 'font-size'));
 
         // TODO: remove `new` styling when we switch to new styling everywhere
         &.new {
           padding: px-to-rem(get-map($styles, 'padding-top_new'))
             px-to-rem(get-map($styles, 'padding-horizontal_new'))
-            px-to-rem(get-map($styles, 'padding-bottom_new'))
-            px-to-rem(get-map($styles, 'padding-horizontal_new'));
+            px-to-rem(get-map($styles, 'padding-bottom_new'));
         }
 
         &.icon {
@@ -214,8 +210,7 @@
       &:not(.new) {
         padding: px-to-rem(get-map($tertiary, 'padding-top'))
           px-to-rem(get-map($tertiary, 'padding-horizontal'))
-          px-to-rem(get-map($tertiary, 'padding-bottom'))
-          px-to-rem(get-map($tertiary, 'padding-horizontal'));
+          px-to-rem(get-map($tertiary, 'padding-bottom'));
         bottom: px-to-rem(get-map($tertiary, 'padding-top'));
         right: px-to-rem(get-map($tertiary, 'padding-horizontal'));
       }

package/styles/uclasses/README.md

@@ -0,0 +1,49 @@
+# Utility Classes
+
+These are utility classes that are used in the `next-ui` app and libraries. They are deliberately simple in order to test the adoption within the team.
+
+The starting point for the tooling to generate these classes came from [codyframe](https://github.com/codyhouse/codyframe).
+In future we may want to expand on our small set using more of the utility classes that codyframe has, or even use something like [tailwindcss](https://tailwindcss.com/) instead.
+
+The `global.css` file is used to define the utility classes globally and also for intellisense in the editor. If you modify the generator sass then you will need to run `pnpm build:uclasses` from the root of the `/frontend/v2` workspace.
+
+Ensure you have the recommended extension from .vscode workspace settings to get the intellisense.
+
+## Available Classes
+
+### Layout & Display
+
+- **Flex**: `.flex`, `.inline-flex`, `.flex-wrap`, `.flex-nowrap`, `.flex-col`, `.flex-col-reverse`, `.flex-row`, `.flex-row-reverse`, `.flex-center`, `.flex-grow`, `.flex-grow-0`, `.flex-shrink`, `.flex-shrink-0`, `.flex-basis-0`
+- **Alignment**: `.justify-[start|end|center|between]`, `.items-[center|start|end|baseline|stretch]`, `.content-[start|end|center|between]`
+- **Display**: `.block`, `.inline-block`, `.inline`, `.contents`, `.grid`, `.inline-grid`, `.hidden`
+- **Gap**: `.gap-[0|px|0.5|1|1.5|2|2.5|3|3.5|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72]`, `.gap-[x|y]-[sizes]`
+
+### Spacing & Position
+
+- **Margin**: `.m-[auto|0]`, `.m[x|y]-[auto|0]`, `.m[t|r|b|l]-[auto|0]`
+- **Padding**: `.p[x|y]-0`, `.p[t|r|b|l]-0`
+- **Position**: `.relative`, `.absolute`, `.fixed`, `.sticky`, `.static`, `.inset-0`
+- **Z-Index**: `.z-[0|1|2|3]`
+- **Width**: `.w-full`
+- **Max Width**: `.max-w-[0|px|0.5...72|none|xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|full|min|max|fit|prose|screen-sm|screen-md|screen-lg|screen-xl|screen-2xl]`
+
+### Typography
+
+- **Text**: `.truncate`/`.text-truncate`, `.text-replace`, `.break-word`
+- **Transform**: `.uppercase`, `.capitalize`
+- **Alignment**: `.text-[center|left|right|justify]`
+- **Decoration**: `.line-through`, `.underline`, `.text-decoration-none`
+- **Vertical Align**: `.align-[baseline|sub|super|text-top|text-bottom|top|middle|bottom]`
+
+### Other Utilities
+
+- **Cursor**: `.cursor-[pointer|default]`
+- **Events**: `.pointer-events-[auto|none]`
+- **Height**: `.min-h-[0|full|screen]`, `.max-h-[full|screen]`
+- **Opacity**: `.opacity-[0|25|50|75|100]`
+- **Overflow**: `.overflow-[visible|hidden|clip|auto]`, `.overflow-[x|y]-[hidden|clip]`
+- **Scroll**: `.momentum-scrolling`, `.overscroll-contain`, `.scroll-smooth`
+- **Object Fit**: `.object-[contain|cover]`
+- **Transform**: `.rotate-[90|180|270]`
+- **Transform Origin**: `.origin-[center|top|right|bottom|left|top-left|top-right|bottom-left|bottom-right]`
+- **Visibility**: `.visible`, `.invisible`