@apolitical/component-library 4.8.7 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apolitical/component-library",
-  "version": "4.8.7",
+  "version": "5.0.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {

package/styles/base/buttons/_buttons.scss

@@ -1,6 +1,6 @@
 @use 'sass:meta';
 @import './../../functions', './../../mixins', './../../variables';
-@import './icons', './mixins', './sizes';
+@import './icons', './mixins';
 
 @layer base {
   button,
@@ -8,13 +8,13 @@
     @include transition(background color border-color text-decoration-color);
 
     background: get-map($theme, 'button_primary_bg');
-    padding: px-to-rem(get-map($medium, 'padding-top'))
-      px-to-rem(get-map($medium, 'padding-horizontal'))
-      px-to-rem(get-map($medium, 'padding-bottom'))
-      px-to-rem(get-map($medium, 'padding-horizontal'));
+    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'));
     position: relative;
     text-align: center;
-    font-size: px-to-rem(get-map($medium, 'font-size'));
+    font-size: px-to-rem(get-map($button-medium, 'font-size'));
     font-weight: 700;
     text-decoration: none;
     border-radius: 360rem; // Completely round corners. This could be any large number but 360 evokes a circle well!
@@ -48,10 +48,10 @@
     // TODO: remove when we have new styling
     &.new {
       background: get-map($theme, 'button_new_primary_bg');
-      padding: px-to-rem(get-map($medium, 'padding-top_new'))
-        px-to-rem(get-map($medium, 'padding-horizontal_new'))
-        px-to-rem(get-map($medium, 'padding-bottom_new'))
-        px-to-rem(get-map($medium, 'padding-horizontal_new'));
+      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'));
       color: get-map($theme, 'button_primary');
 
       &:hover,
@@ -296,14 +296,14 @@
       &::before {
         content: '';
         background: currentcolor;
-        width: px-to-rem(get-map($medium, 'icon-width'));
-        height: px-to-rem(get-map($medium, 'icon-width'));
+        width: px-to-rem(get-map($button-medium, 'icon-width'));
+        height: px-to-rem(get-map($button-medium, 'icon-width'));
         display: block;
       }
 
       &.left {
         &::before {
-          margin-right: px-to-rem(get-map($medium, 'icon-gutter'));
+          margin-right: px-to-rem(get-map($button-medium, 'icon-gutter'));
         }
 
         &.no-text::before {
@@ -313,7 +313,7 @@
 
       &.right {
         &::before {
-          margin-left: px-to-rem(get-map($medium, 'icon-gutter'));
+          margin-left: px-to-rem(get-map($button-medium, 'icon-gutter'));
           order: 2;
         }
 

package/styles/{base/buttons/_sizes.scss → variables/sizes/_buttons.scss}

@@ -1,5 +1,5 @@
 // The button defaults to the primary variant and medium styling so are not added as classes - they live on the default `button` styling
-$large: (
+$button-large: (
   'font-size': 18,
   'padding-top': 14,
   'padding-top_new': 20,
@@ -11,7 +11,7 @@ $large: (
   'icon-offset': 2,
   'icon-gutter': 12,
 );
-$medium: (
+$button-medium: (
   'font-size': 16,
   'padding-top': 10,
   'padding-top_new': 14,
@@ -23,7 +23,7 @@ $medium: (
   'icon-offset': 2,
   'icon-gutter': 10,
 );
-$small: (
+$button-small: (
   'font-size': 14,
   'padding-top': 8,
   'padding-top_new': 10,
@@ -35,7 +35,7 @@ $small: (
   'icon-offset': 2,
   'icon-gutter': 8,
 );
-$sizes: ('large', $large), ('small', $small);
+$sizes: ('large', $button-large), ('small', $button-small);
 $secondary: (
   'border': 1,
 );

package/styles/variables/sizes/_header.scss

@@ -0,0 +1,19 @@
+@use 'sass:map';
+@import './buttons', './logo';
+
+// Moved variables here to be able to use them in uis
+$header: (
+  'padding-vertical': 16,
+  'padding-horizontal': 24,
+  'padding-horizontal_md': 40,
+  'border': 1,
+  'gap': 16,
+);
+$base-height: (get-map($header, 'padding-vertical') * 2) +
+  (get-map($header, 'border') * 3);
+$header-height: (
+  'height': $base-height + get-map($logo, 'height'),
+  'height_md': $base-height + get-map($button-large, 'font-size') +
+    get-map($button-large, 'padding-top') + get-map($button-large, 'padding-bottom'),
+);
+$header: map.merge($header, $header-height);

package/styles/variables/sizes/_index.scss

@@ -1 +1 @@
-@import 'common';
+@import 'buttons', 'common', 'header', 'logo';

package/styles/variables/sizes/_logo.scss

@@ -0,0 +1,6 @@
+$logo: (
+  'width': 24,
+  'width_881': 156,
+  'height': 32,
+  'height_881': 32,
+);