@apolitical/component-library 6.6.26 → 7.0.0

package/styles/README.md

@@ -10,7 +10,7 @@
 
 We're using [CSS cascade layers (`@layer`)](https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/) to organise our styles, to help us avoid specificity issues and to make it easier to find and update styles.
 
-The `public/styles/index.scss` file defines the order of our layers, with the browser reset as the lowest.
+The `./index.scss` file defines the order of our layers, with the browser reset as the lowest.
 
 If you need to overwrite CSS, you don't need to create an overly specific (and less performant) rule or add an `!important` (as an aside: please, please [never add an `!important`](https://dev.to/alvaromontoro/using-important-in-css-75c)) - just put the styling in a higher layer.
 
@@ -20,7 +20,7 @@ The only 'gotcha' with this is importing external CSS; any styling that _isn't_
 
 ## Colour variables
 
-Our colour variables are defined in `public/styles/variables/colors`.
+Our colour variables are defined in `./variables/colors`.
 
 We have two separate files:
 
@@ -30,11 +30,11 @@ Because the colours are described as colours (`b700`), rather than by what they'
 
 We can't rely on these colours making sense in the future, so we don't use them directly in the code.
 
-- `theme/index.scss` defines a `$theme` map which describes where the colours are used, rather than what the colours look like, e.g. `card_bg` for the default background colour of cards and `card_hover_bg` for the background colour cards should change to on hover.
+- `./theme/index.scss` defines a `$theme` map which describes where the colours are used, rather than what the colours look like, e.g. `card_bg` for the default background colour of cards and `card_hover_bg` for the background colour cards should change to on hover.
 
 Using these names, rather than the direct colour values, future-proofs the code against redesigns and makes it easy to maintain; when we redesign the platform, we can update the colours in one place, rather than having to amend every component.
 
-To avoid `theme` being a giant, difficult-to-navigate file, we split out all the values by the component directory they're in (e.g. `base`, `buttons`, `cards`, etc.) and then import them into `theme/index.scss`. We use a Sass function to pull everything into the `$theme` variable, so we don't need to know exactly what's in each file.
+To avoid `theme` being a giant, difficult-to-navigate file, we split out all the values by the component directory they're in (e.g. `base`, `buttons`, `cards`, etc.) and then import them into `./theme/index.scss`. We use a Sass function to pull everything into the `$theme` variable, so we don't need to know exactly what's in each file.
 
 ---
 
@@ -52,7 +52,7 @@ By default, buttons are `medium`. They don't need a class to be styled. Buttons
 
 ### Icons
 
-Buttons can have an icon but - because we can't mix pre-processing and data passed into CSS for file names, like CSS variables or data attributes - icons on buttons need to be set up in advance with classes. The list of available icons is maintained in `base/buttons/_icons.scss`. To add a new icon, add a new item to the list with arguments for the sizes on large, medium, and small buttons.
+Buttons can have an icon but - because we can't mix pre-processing and data passed into CSS for file names, like CSS variables or data attributes - icons on buttons need to be set up in advance with classes. The list of available icons is maintained in `./base/buttons/_icons.scss`. To add a new icon, add a new item to the list with arguments for the sizes on large, medium, and small buttons.
 
 To add an icon to a button, add the class name `icon [file name of icon without file extension]`, e.g. `icon heart_empty`.
 

package/styles/base/_accessibility.scss

@@ -30,6 +30,7 @@
 
   .hidden {
     @include hidden-element;
+
     @include amend-selector-path('.hidden', 'button.hidden, .button.hidden') {
       &.tertiary:not(.new) {
         padding: 0;

package/styles/base/form/_checkbox.scss

@@ -1,4 +1,4 @@
-@import '@/styles/functions', '@/styles/mixins', '@/styles/variables';
+@import '../../functions', '../../mixins', '../../variables';
 
 $pretty-checkbox: (
   'width': 24,

package/styles/base/form/_radio.scss

@@ -1,4 +1,4 @@
-@import '@/styles/functions', '@/styles/mixins', '@/styles/variables';
+@import '../../functions', '../../mixins', '../../variables';
 
 $radio: (
   'border': 2,

package/styles/functions/_maps.scss

@@ -12,11 +12,13 @@
           @return map.get($map, $children);
         } @else {
           $new-list: ();
+
           @for $i from 1 through length($children) {
             @if $i != 1 {
               $new-list: list.append($new-list, list.nth($children, $i), 'space');
             }
           }
+
           @return get-map($map, list.nth($children, 1), $new-list);
         }
       } @else {

package/styles/mixins/_breakpoints.scss

@@ -13,6 +13,7 @@ $breakpoint-sizes: (
 // breakpoints a bit faster by not having to type out the full media query each time.
 @mixin breakpoint($types, $breakpoints) {
   $media: ('only screen');
+
   @for $i from 1 through length($types) {
     $type: list.nth($types, $i);
     $breakpoint: list.nth($breakpoints, $i);

package/styles/mixins/_styles.scss

@@ -29,6 +29,7 @@
     @if $color == 'medium' {
       background: get-map($theme, 'text_line_medium');
     }
+
     @if $color == 'dark' {
       background: get-map($theme, 'text_line_dark');
     }

package/styles/variables/colors/theme/_modals.scss

@@ -11,5 +11,4 @@ $modals: (
   modal_success_title: get-map($c, 'success600'),
   modal_success_title_background: get-map($c, 'g100'),
   modal_success_icon_background: get-map($c, 'success600'),
-  modal_success_bg: get-map($c, 'g100'),
 );