kirbydesign · RasmusKjeldgaard · Apr 1, 2022 · Mar 28, 2022 · Mar 29, 2022 · Mar 29, 2022
diff --git a/.prettierignore b/.prettierignore
@@ -1,10 +1,11 @@
-/src/kirby/scss/base/_include-media.scss
 /.github/
 /libs/designsystem/src/lib/components/web-component-proxies.component.ts
 /libs/designsystem/src/lib/components/angular-component-lib/**
+/libs/core/scss/**
 /libs/core/dist/**
 /libs/core/loader/**
 /libs/core/component-docs.d.ts
 /libs/core/component-docs.json
 /libs/core/src/components.d.ts
-/libs/**/readme.md
+/libs/**/readme.md
+/node_modules/
diff --git a/.stylelintignore b/.stylelintignore
@@ -1 +1,12 @@
-/src/kirby/scss/base/_include-media.scss
+libs/core/scss/**
+/.github/
+/libs/designsystem/src/lib/components/web-component-proxies.component.ts
+/libs/designsystem/src/lib/components/angular-component-lib/**
+/libs/core/scss/**
+/libs/core/dist/**
+/libs/core/loader/**
+/libs/core/component-docs.d.ts
+/libs/core/component-docs.json
+/libs/core/src/components.d.ts
+/libs/**/readme.md
+/node_modules/
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,6 +1,28 @@
 {
-  "plugins": ["stylelint-prettier"],
-  "extends": ["stylelint-prettier/recommended"],
+  "extends": [
+    "stylelint-config-standard-scss",
+    "stylelint-config-prettier-scss"
+  ],
   "rules": {
+    "scss/at-mixin-pattern": [
+			"^(-?_?[a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+			{
+				"message": "Expected mixin name to be kebab-case"
+			}
+    ],
+    "scss/at-function-pattern": [
+			"^(-?_?[a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+			{
+				"message": "Expected function name to be kebab-case"
+			}
+    ],
+    "scss/dollar-variable-pattern": [
+			"^(-?_?[a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+			{
+				"message": "Expected variable to be kebab-case"
+			}
+    ],
+    "scss/at-extend-no-missing-placeholder": null,
+    "no-descending-specificity": null
   }
-}
+}
diff --git a/apps/cookbook/karma.conf.js b/apps/cookbook/karma.conf.js
@@ -4,7 +4,7 @@
 const { join } = require('path');
 const getBaseKarmaConfig = require('../../karma.conf');
 
-module.exports = function(config) {
+module.exports = function (config) {
   const baseConfig = getBaseKarmaConfig();
   config.set({
     ...baseConfig,

diff --git a/apps/cookbook/src/app/accessibility/accessibility-guidelines.html b/apps/cookbook/src/app/accessibility/accessibility-guidelines.html
@@ -2,9 +2,7 @@
   <h1>Accessibility in Kirby</h1>
 
   <h2>Can Kirby make an application accessible?</h2>
-  <p>
-    The short answer is no.
-  </p>
+  <p>The short answer is no.</p>
   <p>
     The accessibility of an application largely depends on its markup. In other words, it depends on
     how the components in Kirby are used. The role of the components is to allow for developers to
@@ -32,9 +30,7 @@ <h2>Can Kirby make an application accessible?</h2>
       >exploring new ways of improving your product for everyone</a
     >.
   </p>
-  <p>
-    So where do you begin? Our suggestion is to read on!
-  </p>
+  <p>So where do you begin? Our suggestion is to read on!</p>
 
   <h3>Mindset - what is accessibility?</h3>
   <p>
@@ -43,9 +39,7 @@ <h3>Mindset - what is accessibility?</h3>
   </p>
 
   <h4>Accessibility is not a feature</h4>
-  <p>
-    Accessibility is not something that is tagged onto an application like a feature.
-  </p>
+  <p>Accessibility is not something that is tagged onto an application like a feature.</p>
   <p>
     <strong>All</strong> applications have some degree of accessibility, whether it is considered or
     not. If it is not actively prioritized, the accessibility of an application is most likely poor.
@@ -134,9 +128,7 @@ <h3>Do not be in the way</h3>
     allows for accessibility. On the contrary, it is also possible to use them in a lot of
     completely inaccessible ways.
   </p>
-  <p>
-    But the components in Kirby should never be in the way of making an application accessible.
-  </p>
+  <p>But the components in Kirby should never be in the way of making an application accessible.</p>
   <p>
     If a developer ever experiences that a Kirby component causes problems when working with
     accessibility; do not hesitate to create an issue in the
@@ -231,9 +223,7 @@ <h3>Topics for exploration</h3>
   <h3>Resources</h3>
   <p>
     While a11y.coffee has a
-    <a target="blank" href="https://a11y.coffee/dig-in/">
-      list of resources
-    </a>
+    <a target="blank" href="https://a11y.coffee/dig-in/"> list of resources </a>
     to further explore the field of accessibility, we would like to supplement that with some of our
     own resources:
   </p>

diff --git a/apps/cookbook/src/app/app.component.scss b/apps/cookbook/src/app/app.component.scss
diff --git a/apps/cookbook/src/app/app.component.ts b/apps/cookbook/src/app/app.component.ts
@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'cookbook-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
   title = 'Kirby design system';

diff --git a/apps/cookbook/src/app/component-status/component-status.component.scss b/apps/cookbook/src/app/component-status/component-status.component.scss
@@ -12,6 +12,7 @@
 
 .github-error {
   font-style: italic;
+
   ion-icon[name='alert'] {
     font-size: 24px;
     vertical-align: text-bottom;
@@ -44,6 +45,7 @@
   tr {
     &.component {
       vertical-align: middle;
+      border-top: 0.1rem solid utils.get-color('medium');
 
       .component {
         ion-icon {
@@ -66,10 +68,6 @@
       }
     }
 
-    &.component {
-      border-top: 0.1rem solid utils.get-color('medium');
-    }
-
     &.subcomponent,
     &.enhancement {
       vertical-align: middle;
@@ -101,6 +99,7 @@
       &-subcomponent td:first-child {
         padding-left: 2rem;
       }
+
       ion-icon[name='add-circle'] {
         font-size: 16px;
         vertical-align: sub;
@@ -126,7 +125,7 @@
     }
   }
 
-  a[href^="https://"] ion-icon {
+  a[href^='https:\/\/'] ion-icon {
     vertical-align: sub;
     font-size: 18px;
 
@@ -140,6 +139,7 @@
 
     &.version {
       margin-left: 0.5rem;
+
       --ion-color-base: #{utils.get-color('semi-dark')};
       --ion-color-contrast: #{utils.get-color('white')};
     }

diff --git a/apps/cookbook/src/app/component-status/component-status.component.ts b/apps/cookbook/src/app/component-status/component-status.component.ts
@@ -198,7 +198,8 @@ export class ComponentStatusComponent implements OnInit, OnDestroy {
     // https://app.zeplin.io/project/5e1f27f01ffb15bd95efc426/screen/5e46809806041da857a4bf49
     // https://app.zeplin.io/styleguide/5e7094006caa6013a71590b8/components?seid=5e466bc4394e31b73d693e4e
     // https://app.zeplin.io/styleguide/5e734ec04ee3d6bac20654e2/components?cseid=5fa2b58acbcb0e8512f515ee
-    const regex = /(https:\/\/(app\.zeplin|zpl)\.io\/)((project\/[a-z,0-9]{24}\/screen\/[a-z,0-9]{24})|(\b(?!project)[a-z,0-9]{7}\b)|(styleguide\/[a-z,0-9]{24}\/components\?(seid|cseid)\=[a-z,0-9]{24}))/i;
+    const regex =
+      /(https:\/\/(app\.zeplin|zpl)\.io\/)((project\/[a-z,0-9]{24}\/screen\/[a-z,0-9]{24})|(\b(?!project)[a-z,0-9]{7}\b)|(styleguide\/[a-z,0-9]{24}\/components\?(seid|cseid)\=[a-z,0-9]{24}))/i;
     let matches = issue.body.match(regex);
     const url = matches ? matches[0] : null;
     return url;

diff --git a/apps/cookbook/src/app/designer/card-designer/card-designer.component.scss b/apps/cookbook/src/app/designer/card-designer/card-designer.component.scss
@@ -12,16 +12,21 @@ cookbook-card-example {
   display: inline-block;
   width: 257px;
   height: 362px;
+
   --kirby-card-background-image: url('/assets/kirby/backgrounds/kirby-card.png');
+
   &.show-background {
-    --kirby-example-wireframe-color: rgba(255, 0, 0, 0.5);
+    --kirby-example-wireframe-color: rgb(255 0 0 / 50%);
+
     background-image: var(--kirby-card-background-image);
     background-position: -1px -1px;
     background-repeat: no-repeat;
     background-size: 257px;
+
     &.dim-background {
       --kirby-example-wireframe-color: red;
-      background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
+
+      background-image: linear-gradient(rgb(255 255 255 / 50%), rgb(255 255 255 / 50%)),
         var(--kirby-card-background-image);
 
       footer kirby-button {

diff --git a/apps/cookbook/src/app/examples/avatar-example/examples/badge.scss b/apps/cookbook/src/app/examples/avatar-example/examples/badge.scss
@@ -1,5 +1,5 @@
 @use 'avatar-examples.shared.scss';
-@use "~@kirbydesign/core/src/scss/utils";
+@use '~@kirbydesign/core/src/scss/utils';
 
 :host {
   padding: utils.size('l');

diff --git a/apps/cookbook/src/app/examples/badge-example/badge-example.component.scss b/apps/cookbook/src/app/examples/badge-example/badge-example.component.scss
@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 @use '~@kirbydesign/core/src/scss/utils';
 
 :host {

diff --git a/apps/cookbook/src/app/examples/button-example/button-example.component.html b/apps/cookbook/src/app/examples/button-example/button-example.component.html
@@ -10,8 +10,9 @@ <h2>Sizes</h2>
       *ngFor="let size of buttonSizes"
       value="{{ size.value }}"
       [attr.selected]="buttonSize === size.value ? true : null"
-      >{{ size.text }}</option
     >
+      {{ size.text }}
+    </option>
   </select>
 </fieldset>
 
@@ -96,9 +97,7 @@ <h3>Custom Icon</h3>
   <label>Disabled</label>
 </div>
 
-<h2>
-  Button with icon and text
-</h2>
+<h2>Button with icon and text</h2>
 <button kirby-button [size]="buttonSize">
   <kirby-icon name="edit"></kirby-icon>
   Icon Left

diff --git a/apps/cookbook/src/app/examples/button-example/button-example.component.scss b/apps/cookbook/src/app/examples/button-example/button-example.component.scss
@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 @use '~@kirbydesign/core/src/scss/utils';
 
 kirby-card {

diff --git a/apps/cookbook/src/app/examples/calendar-example/calendar-card-example.component.scss b/apps/cookbook/src/app/examples/calendar-example/calendar-card-example.component.scss
@@ -3,7 +3,6 @@
 kirby-card {
   z-index: 3; // Ensure dropdown opens over configuration checkboxes
   overflow: visible; // Ensure dropdown isn't cut off
-
   width: 320px;
   margin-bottom: 20px;
 

diff --git a/apps/cookbook/src/app/examples/card-example/card-example.component.scss b/apps/cookbook/src/app/examples/card-example/card-example.component.scss
@@ -32,7 +32,7 @@ kirby-card.show-size {
   &::before {
     background-color: #ccc;
     color: white;
-    content: '-'; //"\00a0";
+    content: '-'; // "\00a0";
     font-size: 0.8em;
     font-weight: 700;
     letter-spacing: 0.1em;
@@ -45,23 +45,26 @@ kirby-card.show-size {
     width: 6em;
     border-top-left-radius: 25%;
     border-top-right-radius: 25%;
-    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 6px 8px rgb(0 0 0 / 30%);
   }
 
-  --cardSmallBackgroundColor: #8dabee;
-  --cardMediumBackgroundColor: #d2a2ee;
-  --cardLargeBackgroundColor: #d8b280;
+  --card-small-background-color: #8dabee;
+  --card-medium-background-color: #d2a2ee;
+  --card-large-background-color: #d8b280;
+
   &[size='<small']::before,
   &[size='small']::before {
     content: 'SM';
-    background-color: var(--cardSmallBackgroundColor);
+    background-color: var(--card-small-background-color);
   }
+
   &[size='medium']::before {
     content: 'MD';
-    background-color: var(--cardMediumBackgroundColor);
+    background-color: var(--card-medium-background-color);
   }
+
   &[size='large']::before {
     content: 'LG';
-    background-color: var(--cardLargeBackgroundColor);
+    background-color: var(--card-large-background-color);
   }
 }
diff --git a/...amples/card-css-background-image-example/card-css-background-image-example.component.scss b/...amples/card-css-background-image-example/card-css-background-image-example.component.scss
@@ -8,18 +8,19 @@
 kirby-card {
   --kirby-card-background-image: linear-gradient(
       0deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(0, 0, 0, 0.6) 100%
+      rgb(255 255 255 / 0%) 0%,
+      rgb(0 0 0 / 60%) 100%
     ),
     url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750');
 
   @include utils.media('>=medium') {
     --kirby-card-background-image: linear-gradient(
         0deg,
-        rgba(255, 255, 255, 0) 0%,
-        rgba(0, 0, 0, 0.4) 100%
+        rgb(255 255 255 / 0%) 0%,
+        rgb(0 0 0 / 40%) 100%
       ),
       url('https://images.unsplash.com/photo-1560840067-ddcaeb7831d2');
   }
+
   min-height: 300px;
 }
diff --git a/...amples/chart-deprecated-example/examples/chart-deprecated-example-areaspline.component.ts b/...amples/chart-deprecated-example/examples/chart-deprecated-example-areaspline.component.ts
@@ -30,29 +30,7 @@ export class ChartDeprecatedExampleAreasplineComponent {
   template = config.template;
 
   data = [
-    1600.9,
-    1710.5,
-    1060.4,
-    1290.2,
-    1440.0,
-    1460.0,
-    1350.6,
-    1480.5,
-    1800.4,
-    1940.1,
-    1950.6,
-    1700.4,
-    1600.9,
-    1710.5,
-    1060.4,
-    1290.2,
-    1440.0,
-    1460.0,
-    1350.6,
-    1480.5,
-    1800.4,
-    1940.1,
-    1950.6,
-    1700.4,
+    1600.9, 1710.5, 1060.4, 1290.2, 1440.0, 1460.0, 1350.6, 1480.5, 1800.4, 1940.1, 1950.6, 1700.4,
+    1600.9, 1710.5, 1060.4, 1290.2, 1440.0, 1460.0, 1350.6, 1480.5, 1800.4, 1940.1, 1950.6, 1700.4,
   ];
 }
diff --git a/.../app/examples/chart-deprecated-example/examples/chart-deprecated-example-bar.component.ts b/.../app/examples/chart-deprecated-example/examples/chart-deprecated-example-bar.component.ts
@@ -6,7 +6,7 @@ import { DesignTokenHelper, ModalController } from '@kirbydesign/designsystem';
 const getColor = DesignTokenHelper.getColor;
 
 function colorPoints(selectedYear: string) {
-  return function() {
+  return function () {
     var series = this.series;
     for (var i = 0, ie = series.length; i < ie; ++i) {
       var points = series[i].data;

diff --git a/...p/examples/chart-deprecated-example/examples/chart-deprecated-example-column.component.ts b/...p/examples/chart-deprecated-example/examples/chart-deprecated-example-column.component.ts
@@ -5,7 +5,7 @@ import { DesignTokenHelper, ModalController } from '@kirbydesign/designsystem';
 
 const getColor = DesignTokenHelper.getColor;
 function colorPoints(selectedIdx) {
-  return function() {
+  return function () {
     var series = this.series;
     for (var i = 0, ie = series.length; i < ie; ++i) {
       var points = series[i].data;