diff --git a/.prettierignore b/.prettierignore index 5583a1f1c7..e57cf6d21b 100644 --- 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 \ No newline at end of file +/libs/**/readme.md +/node_modules/ diff --git a/.stylelintignore b/.stylelintignore index 1696e479db..93b21054af 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1 +1,12 @@ -/src/kirby/scss/base/_include-media.scss \ No newline at end of file +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 index 7518aca086..eb7c4f03a7 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,6 +1,25 @@ { - "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 index f767215ecf..c29d8ab24f 100644 --- 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 index fcc7df1a26..4a17156c00 100644 --- a/apps/cookbook/src/app/accessibility/accessibility-guidelines.html +++ b/apps/cookbook/src/app/accessibility/accessibility-guidelines.html @@ -2,9 +2,7 @@

Accessibility in Kirby

Can Kirby make an application accessible?

-

- The short answer is no. -

+

The short answer is no.

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 @@

Can Kirby make an application accessible?

>exploring new ways of improving your product for everyone.

-

- So where do you begin? Our suggestion is to read on! -

+

So where do you begin? Our suggestion is to read on!

Mindset - what is accessibility?

@@ -43,9 +39,7 @@

Mindset - what is accessibility?

Accessibility is not a feature

-

- Accessibility is not something that is tagged onto an application like a feature. -

+

Accessibility is not something that is tagged onto an application like a feature.

All 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 @@

Do not be in the way

allows for accessibility. On the contrary, it is also possible to use them in a lot of completely inaccessible ways.

-

- But the components in Kirby should never be in the way of making an application accessible. -

+

But the components in Kirby should never be in the way of making an application accessible.

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 @@

Topics for exploration

Resources

While a11y.coffee has a - - list of resources - + list of resources to further explore the field of accessibility, we would like to supplement that with some of our own resources:

diff --git a/apps/cookbook/src/app/app.component.scss b/apps/cookbook/src/app/app.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/cookbook/src/app/app.component.ts b/apps/cookbook/src/app/app.component.ts index 47e09d8329..a2a2064ec3 100644 --- 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 index bcb02afaee..82073b1262 100644 --- 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 index 48342a4a89..6c6ed71f15 100644 --- 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 index b8927c1e04..2d12f7fd44 100644 --- 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 index a01cfd4109..3db39500ec 100644 --- 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 index 39306fa84a..08e9b0263f 100644 --- 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 index f9077131d3..583fb2ce37 100644 --- 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 @@

Sizes

*ngFor="let size of buttonSizes" value="{{ size.value }}" [attr.selected]="buttonSize === size.value ? true : null" - >{{ size.text }} + {{ size.text }} + @@ -96,9 +97,7 @@

Custom Icon

-

- Button with icon and text -

+

Button with icon and text

diff --git a/apps/cookbook/src/app/examples/grid-layout-example/grid-layout-single-container-example/grid-layout-single-container-example.component.html b/apps/cookbook/src/app/examples/grid-layout-example/grid-layout-single-container-example/grid-layout-single-container-example.component.html index 843a7cfdda..86479b6172 100644 --- a/apps/cookbook/src/app/examples/grid-layout-example/grid-layout-single-container-example/grid-layout-single-container-example.component.html +++ b/apps/cookbook/src/app/examples/grid-layout-example/grid-layout-single-container-example/grid-layout-single-container-example.component.html @@ -5,27 +5,19 @@

Grid Layout - Single Grid Container

Heading level 2

- - 1 - + 1

Heading level 2

- - 2 - + 2

Heading level 2

- - 3 - + 3

Heading level 2

- - 4 - + 4
diff --git a/apps/cookbook/src/app/examples/icon-example/icon-example.component.scss b/apps/cookbook/src/app/examples/icon-example/icon-example.component.scss index d72863b9c3..c9837aabe2 100644 --- a/apps/cookbook/src/app/examples/icon-example/icon-example.component.scss +++ b/apps/cookbook/src/app/examples/icon-example/icon-example.component.scss @@ -29,7 +29,7 @@ h2 { display: block; max-width: 112px; font-size: 12px; - color: rgba(0, 0, 0, 0.6); + color: rgb(0 0 0 / 60%); white-space: nowrap; } diff --git a/apps/cookbook/src/app/examples/list-example/examples/colored-items.ts b/apps/cookbook/src/app/examples/list-example/examples/colored-items.ts index 2af41020de..dc0902bcc8 100644 --- a/apps/cookbook/src/app/examples/list-example/examples/colored-items.ts +++ b/apps/cookbook/src/app/examples/list-example/examples/colored-items.ts @@ -25,9 +25,7 @@ export const ListColoredItemsExampleTemplate = ` - - ${ListColoredItemsExampleTemplate} - + ${ListColoredItemsExampleTemplate} `, }) diff --git a/apps/cookbook/src/app/examples/list-example/examples/dividers.ts b/apps/cookbook/src/app/examples/list-example/examples/dividers.ts index b607f41f78..d888a1db7e 100644 --- a/apps/cookbook/src/app/examples/list-example/examples/dividers.ts +++ b/apps/cookbook/src/app/examples/list-example/examples/dividers.ts @@ -14,9 +14,7 @@ export const ListWithDividersExampleTemplate = ` - - ${ListWithDividersExampleTemplate} - + ${ListWithDividersExampleTemplate} `, }) diff --git a/apps/cookbook/src/app/examples/list-example/examples/header-and-footer.ts b/apps/cookbook/src/app/examples/list-example/examples/header-and-footer.ts index 9193f3c9c8..9a67f4949c 100644 --- a/apps/cookbook/src/app/examples/list-example/examples/header-and-footer.ts +++ b/apps/cookbook/src/app/examples/list-example/examples/header-and-footer.ts @@ -33,9 +33,7 @@ export const ListWithHeaderAndFooterExampleTemplate = ` - - ${ListWithHeaderAndFooterExampleTemplate} - + ${ListWithHeaderAndFooterExampleTemplate} `, styles: ['p { margin: 0; }', '.footer { text-align: center; width: 100%; }'], diff --git a/apps/cookbook/src/app/examples/list-example/examples/items.ts b/apps/cookbook/src/app/examples/list-example/examples/items.ts index 7e471ed503..24e1f244be 100644 --- a/apps/cookbook/src/app/examples/list-example/examples/items.ts +++ b/apps/cookbook/src/app/examples/list-example/examples/items.ts @@ -14,9 +14,7 @@ export const ListItemsExampleTemplate = ` selector: 'list-items-example', template: ` - - ${ListItemsExampleTemplate} - + ${ListItemsExampleTemplate} `, }) diff --git a/apps/cookbook/src/app/examples/list-example/examples/sections-and-colored-items.ts b/apps/cookbook/src/app/examples/list-example/examples/sections-and-colored-items.ts index 042dd8b931..1f97c939c1 100644 --- a/apps/cookbook/src/app/examples/list-example/examples/sections-and-colored-items.ts +++ b/apps/cookbook/src/app/examples/list-example/examples/sections-and-colored-items.ts @@ -29,9 +29,7 @@ export const ListWithSectionsAndColoredItemsExampleTemplate = ` - - ${ListWithSectionsAndColoredItemsExampleTemplate} - + ${ListWithSectionsAndColoredItemsExampleTemplate} `, }) diff --git a/apps/cookbook/src/app/examples/list-example/examples/sections.ts b/apps/cookbook/src/app/examples/list-example/examples/sections.ts index e907afc33d..39157451b6 100644 --- a/apps/cookbook/src/app/examples/list-example/examples/sections.ts +++ b/apps/cookbook/src/app/examples/list-example/examples/sections.ts @@ -28,9 +28,7 @@ export const ListWithSectionsExampleTemplate = ` - - ${ListWithSectionsExampleTemplate} - + ${ListWithSectionsExampleTemplate} `, }) diff --git a/apps/cookbook/src/app/examples/list-example/examples/selectable-items.ts b/apps/cookbook/src/app/examples/list-example/examples/selectable-items.ts index 3359864191..0abc9472f6 100644 --- a/apps/cookbook/src/app/examples/list-example/examples/selectable-items.ts +++ b/apps/cookbook/src/app/examples/list-example/examples/selectable-items.ts @@ -14,9 +14,7 @@ export const ListSelectableItemsExampleTemplate = ` - - ${ListSelectableItemsExampleTemplate} - + ${ListSelectableItemsExampleTemplate} `, }) diff --git a/apps/cookbook/src/app/examples/list-experimental-example/list-experimental-example.component.scss b/apps/cookbook/src/app/examples/list-experimental-example/list-experimental-example.component.scss index ec6016e003..c8481531ba 100644 --- a/apps/cookbook/src/app/examples/list-experimental-example/list-experimental-example.component.scss +++ b/apps/cookbook/src/app/examples/list-experimental-example/list-experimental-example.component.scss @@ -1,4 +1,4 @@ -@use "sass:map"; +@use 'sass:map'; @use '~@kirbydesign/core/src/scss/utils'; @use '~@kirbydesign/core/src/scss/base/list'; diff --git a/apps/cookbook/src/app/examples/list-load-on-demand-example/list-load-on-demand-example.component.scss b/apps/cookbook/src/app/examples/list-load-on-demand-example/list-load-on-demand-example.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/cookbook/src/app/examples/list-load-on-demand-example/list-load-on-demand-example.component.ts b/apps/cookbook/src/app/examples/list-load-on-demand-example/list-load-on-demand-example.component.ts index 47f8f15927..7e2e7eedf8 100644 --- a/apps/cookbook/src/app/examples/list-load-on-demand-example/list-load-on-demand-example.component.ts +++ b/apps/cookbook/src/app/examples/list-load-on-demand-example/list-load-on-demand-example.component.ts @@ -22,12 +22,9 @@ export const ListLoadOnDemandExampleTemplate = ` selector: 'cookbook-list-load-on-demand-example', template: ` - - ${ListLoadOnDemandExampleTemplate} - + ${ListLoadOnDemandExampleTemplate} `, - styleUrls: ['./list-load-on-demand-example.component.scss'], }) export class ListLoadOnDemandExampleComponent extends BaseListComponent { private itemCount: number = 0; diff --git a/apps/cookbook/src/app/examples/list-no-shape-example/list-no-shape-example.component.scss b/apps/cookbook/src/app/examples/list-no-shape-example/list-no-shape-example.component.scss index 9d2a1b35eb..f03369fb5f 100644 --- a/apps/cookbook/src/app/examples/list-no-shape-example/list-no-shape-example.component.scss +++ b/apps/cookbook/src/app/examples/list-no-shape-example/list-no-shape-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/list-swipe-example/list-swipe-example.component.scss b/apps/cookbook/src/app/examples/list-swipe-example/list-swipe-example.component.scss index e8836a6221..0813b3915b 100644 --- a/apps/cookbook/src/app/examples/list-swipe-example/list-swipe-example.component.scss +++ b/apps/cookbook/src/app/examples/list-swipe-example/list-swipe-example.component.scss @@ -19,6 +19,7 @@ $dot-margin: utils.size('xxxs'); &.success { background: var(--kirby-success); } + &.warning { background: var(--kirby-warning); } diff --git a/apps/cookbook/src/app/examples/modal-example/embedded-modal-example/embedded-modal-example.component.html b/apps/cookbook/src/app/examples/modal-example/embedded-modal-example/embedded-modal-example.component.html index 168ee349b8..c4cf24e48b 100644 --- a/apps/cookbook/src/app/examples/modal-example/embedded-modal-example/embedded-modal-example.component.html +++ b/apps/cookbook/src/app/examples/modal-example/embedded-modal-example/embedded-modal-example.component.html @@ -48,15 +48,9 @@

Component properties (injected from parent component):

class="nested-modal-configuration" >

Open nested:

- - - + + + diff --git a/apps/cookbook/src/app/examples/modal-example/modal-example.component.scss b/apps/cookbook/src/app/examples/modal-example/modal-example.component.scss index 6705a8adf6..2861d801fe 100644 --- a/apps/cookbook/src/app/examples/modal-example/modal-example.component.scss +++ b/apps/cookbook/src/app/examples/modal-example/modal-example.component.scss @@ -1,5 +1,5 @@ @use '../examples.shared'; -@use "~@kirbydesign/core/src/scss/utils"; +@use '~@kirbydesign/core/src/scss/utils'; h1 { text-align: center; diff --git a/apps/cookbook/src/app/examples/modal-example/modal-route-example/modal-route-page1-example.component.ts b/apps/cookbook/src/app/examples/modal-example/modal-route-example/modal-route-page1-example.component.ts index 00583fb382..86a5821ee6 100644 --- a/apps/cookbook/src/app/examples/modal-example/modal-route-example/modal-route-page1-example.component.ts +++ b/apps/cookbook/src/app/examples/modal-example/modal-route-example/modal-route-page1-example.component.ts @@ -6,10 +6,10 @@ import { ActivatedRoute } from '@angular/router'; template: ` Modal Page 1/2

The standard Lorem Ipsum passage, used since the 1500s

- QueryParams: - 
{{ queryParams$ | async | json }}
 + + QueryParams: + 
{{ queryParams$ | async | json }}
+

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco diff --git a/apps/cookbook/src/app/examples/progress-circle-example/progress-circle-example.component.scss b/apps/cookbook/src/app/examples/progress-circle-example/progress-circle-example.component.scss index 8c3c30ab2d..7fcc7ad126 100644 --- a/apps/cookbook/src/app/examples/progress-circle-example/progress-circle-example.component.scss +++ b/apps/cookbook/src/app/examples/progress-circle-example/progress-circle-example.component.scss @@ -14,6 +14,7 @@ h2 { margin-bottom: utils.size('xxxs'); + &:not(first-of-type) { margin-top: utils.size('l'); } diff --git a/apps/cookbook/src/app/examples/range-example/range-example.component.scss b/apps/cookbook/src/app/examples/range-example/range-example.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/cookbook/src/app/examples/range-example/range-example.component.ts b/apps/cookbook/src/app/examples/range-example/range-example.component.ts index c49f666b1e..040686a390 100644 --- a/apps/cookbook/src/app/examples/range-example/range-example.component.ts +++ b/apps/cookbook/src/app/examples/range-example/range-example.component.ts @@ -3,6 +3,5 @@ import { Component } from '@angular/core'; @Component({ selector: 'cookbook-range-example', templateUrl: './range-example.component.html', - styleUrls: ['./range-example.component.scss'], }) export class RangeExampleComponent {} diff --git a/apps/cookbook/src/app/examples/reorder-list-example/reorder-list-example.component.scss b/apps/cookbook/src/app/examples/reorder-list-example/reorder-list-example.component.scss index 98dfb5125b..8d026b8470 100644 --- a/apps/cookbook/src/app/examples/reorder-list-example/reorder-list-example.component.scss +++ b/apps/cookbook/src/app/examples/reorder-list-example/reorder-list-example.component.scss @@ -4,6 +4,7 @@ padding: 0 utils.size('s') utils.size('xxs') utils.size('xxs'); display: flex; justify-content: flex-end; + span { padding-left: utils.size('s'); } diff --git a/apps/cookbook/src/app/examples/section-header-example/section-header-example.component.scss b/apps/cookbook/src/app/examples/section-header-example/section-header-example.component.scss index 35bc84864c..a318464f7b 100644 --- a/apps/cookbook/src/app/examples/section-header-example/section-header-example.component.scss +++ b/apps/cookbook/src/app/examples/section-header-example/section-header-example.component.scss @@ -10,6 +10,7 @@ &:not(:first-child) { margin-top: utils.size('l'); } + border-bottom: 1px dotted utils.get-color('medium'); } } diff --git a/apps/cookbook/src/app/examples/slide-button-example/slide-button-example.component.scss b/apps/cookbook/src/app/examples/slide-button-example/slide-button-example.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/cookbook/src/app/examples/slide-button-example/slide-button-example.component.ts b/apps/cookbook/src/app/examples/slide-button-example/slide-button-example.component.ts index e2ff83fb37..822681c302 100644 --- a/apps/cookbook/src/app/examples/slide-button-example/slide-button-example.component.ts +++ b/apps/cookbook/src/app/examples/slide-button-example/slide-button-example.component.ts @@ -5,7 +5,6 @@ import { AlertConfig, ModalController } from '@kirbydesign/designsystem'; @Component({ selector: 'cookbook-slide-button-example', templateUrl: './slide-button-example.component.html', - styleUrls: ['./slide-button-example.component.scss'], }) export class SlideButtonExampleComponent { constructor(private modalController: ModalController) {} diff --git a/apps/cookbook/src/app/examples/slides-example/slides-example.component.html b/apps/cookbook/src/app/examples/slides-example/slides-example.component.html index bd82dc36a5..b632daa0be 100644 --- a/apps/cookbook/src/app/examples/slides-example/slides-example.component.html +++ b/apps/cookbook/src/app/examples/slides-example/slides-example.component.html @@ -11,6 +11,6 @@ >
-

+
diff --git a/apps/cookbook/src/app/examples/spinner-example/spinner-example.component.scss b/apps/cookbook/src/app/examples/spinner-example/spinner-example.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/cookbook/src/app/examples/spinner-example/spinner-example.component.ts b/apps/cookbook/src/app/examples/spinner-example/spinner-example.component.ts index ba61f5344b..cf5ed10391 100644 --- a/apps/cookbook/src/app/examples/spinner-example/spinner-example.component.ts +++ b/apps/cookbook/src/app/examples/spinner-example/spinner-example.component.ts @@ -3,7 +3,6 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'cookbook-spinner-example', templateUrl: './spinner-example.component.html', - styleUrls: ['./spinner-example.component.scss'], }) export class SpinnerExampleComponent implements OnInit { constructor() {} diff --git a/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.scss b/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/cookbook/src/app/examples/styling-html-lists-example/styling-html-lists-example.component.html b/apps/cookbook/src/app/examples/styling-html-lists-example/styling-html-lists-example.component.html index 001d4ff8af..b152734e57 100644 --- a/apps/cookbook/src/app/examples/styling-html-lists-example/styling-html-lists-example.component.html +++ b/apps/cookbook/src/app/examples/styling-html-lists-example/styling-html-lists-example.component.html @@ -28,9 +28,7 @@

Ordered list

  • Sed egestas lorem pharetra
  • Pellentesque habitant morbi
    • -

    - Ipsum, vero est? Iusto ipsum cumque nemo aut exercitationem! -

    +

    Ipsum, vero est? Iusto ipsum cumque nemo aut exercitationem!

    Nested list (unordered)

    @@ -140,9 +138,7 @@

    Text overflow (normal wrap)

    ac, consectetur adipiscing elit. Fusce iaculis ante ac diam. -

    - Quidem magnam ad architecto quod modi explicabo reiciendis omnis perferendis. -

    +

    Quidem magnam ad architecto quod modi explicabo reiciendis omnis perferendis.
    diff --git a/apps/cookbook/src/app/examples/toggle-button-example/toggle-button-example.component.scss b/apps/cookbook/src/app/examples/toggle-button-example/toggle-button-example.component.scss index c56822ecef..ab7e072282 100644 --- a/apps/cookbook/src/app/examples/toggle-button-example/toggle-button-example.component.scss +++ b/apps/cookbook/src/app/examples/toggle-button-example/toggle-button-example.component.scss @@ -1,5 +1,5 @@ @use '../examples.shared'; -@use "~@kirbydesign/core/src/scss/utils"; +@use '~@kirbydesign/core/src/scss/utils'; kirby-toggle-button { margin-right: utils.size('m'); diff --git a/apps/cookbook/src/app/examples/virtual-scroll-example/virtual-scroll-list-example/virtual-scroll-list-example.component.html b/apps/cookbook/src/app/examples/virtual-scroll-example/virtual-scroll-list-example/virtual-scroll-list-example.component.html index 9f9eea6153..cbde24391b 100644 --- a/apps/cookbook/src/app/examples/virtual-scroll-example/virtual-scroll-list-example/virtual-scroll-list-example.component.html +++ b/apps/cookbook/src/app/examples/virtual-scroll-example/virtual-scroll-list-example/virtual-scroll-list-example.component.html @@ -4,7 +4,7 @@ minBufferPx="840" maxBufferPx="1120" itemSize="56" - style="height: 720px;" + style="height: 720px" > diff --git a/apps/cookbook/src/app/guides/grid-layout/grid-layout-extended/grid-layout-extended.component.ts b/apps/cookbook/src/app/guides/grid-layout/grid-layout-extended/grid-layout-extended.component.ts index 485fbe3651..3f712ceeab 100644 --- a/apps/cookbook/src/app/guides/grid-layout/grid-layout-extended/grid-layout-extended.component.ts +++ b/apps/cookbook/src/app/guides/grid-layout/grid-layout-extended/grid-layout-extended.component.ts @@ -5,8 +5,10 @@ import { Component } from '@angular/core'; templateUrl: './grid-layout-extended.component.html', }) export class GridLayoutExtendedComponent { - exampleHtml: string = require('!raw-loader!../../../examples/grid-layout-example/grid-layout-extended-example/grid-layout-extended-example.component.html') - .default; - exampleCss: string = require('!raw-loader!../../../examples/grid-layout-example/grid-layout-extended-example/grid-layout-extended-example.component.scss') - .default; + exampleHtml: string = + require('!raw-loader!../../../examples/grid-layout-example/grid-layout-extended-example/grid-layout-extended-example.component.html') + .default; + exampleCss: string = + require('!raw-loader!../../../examples/grid-layout-example/grid-layout-extended-example/grid-layout-extended-example.component.scss') + .default; } diff --git a/apps/cookbook/src/app/guides/grid-layout/grid-layout-multiple-containers/grid-layout-multiple-containers.component.ts b/apps/cookbook/src/app/guides/grid-layout/grid-layout-multiple-containers/grid-layout-multiple-containers.component.ts index 993a55e508..82623a870c 100644 --- a/apps/cookbook/src/app/guides/grid-layout/grid-layout-multiple-containers/grid-layout-multiple-containers.component.ts +++ b/apps/cookbook/src/app/guides/grid-layout/grid-layout-multiple-containers/grid-layout-multiple-containers.component.ts @@ -5,8 +5,10 @@ import { Component } from '@angular/core'; templateUrl: './grid-layout-multiple-containers.component.html', }) export class GridLayoutMultipleContainersComponent { - exampleHtml: string = require('!raw-loader!../../../examples/grid-layout-example/grid-layout-multiple-containers-example/grid-layout-multiple-containers-example.component.html') - .default; - exampleCss: string = require('!raw-loader!../../../examples/grid-layout-example/grid-layout-multiple-containers-example/grid-layout-multiple-containers-example.component.scss') - .default; + exampleHtml: string = + require('!raw-loader!../../../examples/grid-layout-example/grid-layout-multiple-containers-example/grid-layout-multiple-containers-example.component.html') + .default; + exampleCss: string = + require('!raw-loader!../../../examples/grid-layout-example/grid-layout-multiple-containers-example/grid-layout-multiple-containers-example.component.scss') + .default; } diff --git a/apps/cookbook/src/app/guides/grid-layout/grid-layout-single-container/grid-layout-single-container.component.ts b/apps/cookbook/src/app/guides/grid-layout/grid-layout-single-container/grid-layout-single-container.component.ts index 551380b72f..bde4b5ae76 100644 --- a/apps/cookbook/src/app/guides/grid-layout/grid-layout-single-container/grid-layout-single-container.component.ts +++ b/apps/cookbook/src/app/guides/grid-layout/grid-layout-single-container/grid-layout-single-container.component.ts @@ -5,8 +5,10 @@ import { Component } from '@angular/core'; templateUrl: './grid-layout-single-container.component.html', }) export class GridLayoutSingleContainerComponent { - exampleHtml: string = require('!raw-loader!../../../examples/grid-layout-example/grid-layout-single-container-example/grid-layout-single-container-example.component.html') - .default; - exampleCss: string = require('!raw-loader!../../../examples/grid-layout-example/grid-layout-single-container-example/grid-layout-single-container-example.component.scss') - .default; + exampleHtml: string = + require('!raw-loader!../../../examples/grid-layout-example/grid-layout-single-container-example/grid-layout-single-container-example.component.html') + .default; + exampleCss: string = + require('!raw-loader!../../../examples/grid-layout-example/grid-layout-single-container-example/grid-layout-single-container-example.component.scss') + .default; } diff --git a/apps/cookbook/src/app/guides/virtual-scroll/virtual-scroll-list/virtual-scroll-list.component.ts b/apps/cookbook/src/app/guides/virtual-scroll/virtual-scroll-list/virtual-scroll-list.component.ts index 5a212e8744..5a866f9f95 100644 --- a/apps/cookbook/src/app/guides/virtual-scroll/virtual-scroll-list/virtual-scroll-list.component.ts +++ b/apps/cookbook/src/app/guides/virtual-scroll/virtual-scroll-list/virtual-scroll-list.component.ts @@ -5,6 +5,7 @@ import { Component } from '@angular/core'; templateUrl: './virtual-scroll-list.component.html', }) export class VirtualScrollListComponent { - exampleHtml: string = require('!raw-loader!../../../examples/virtual-scroll-example/virtual-scroll-list-example/virtual-scroll-list-example.component.html') - .default; + exampleHtml: string = + require('!raw-loader!../../../examples/virtual-scroll-example/virtual-scroll-list-example/virtual-scroll-list-example.component.html') + .default; } diff --git a/apps/cookbook/src/app/home/home.component.scss b/apps/cookbook/src/app/home/home.component.scss index 497488c970..1189ef77f9 100644 --- a/apps/cookbook/src/app/home/home.component.scss +++ b/apps/cookbook/src/app/home/home.component.scss @@ -1,5 +1,7 @@ @use '~@kirbydesign/core/src/scss/utils'; +/* stylelint-disable declaration-block-no-redundant-longhand-properties */ + $header-height-mobile: utils.size('xxxl'); $header-height-desktop: 2 * utils.size('xxl'); $footer-height: 3 * utils.size('xxl'); diff --git a/apps/cookbook/src/app/intro/intro.component.html b/apps/cookbook/src/app/intro/intro.component.html index bd7456e0e0..053a2b519c 100644 --- a/apps/cookbook/src/app/intro/intro.component.html +++ b/apps/cookbook/src/app/intro/intro.component.html @@ -28,9 +28,5 @@

    This is Kirby Design System™

    between designers and developers is streamlined, and helps teams to quickly build beautiful screens.

    -

    - We are on a constant journey of learning and Kirby is steadily evolving day by day. -

    -

    - Thanks for your interest — have fun building! -

    +

    We are on a constant journey of learning and Kirby is steadily evolving day by day.

    +

    Thanks for your interest — have fun building!

    diff --git a/apps/cookbook/src/app/iphone/iphone.component.html b/apps/cookbook/src/app/iphone/iphone.component.html index 6187576f55..98b35a223f 100644 --- a/apps/cookbook/src/app/iphone/iphone.component.html +++ b/apps/cookbook/src/app/iphone/iphone.component.html @@ -1,7 +1,7 @@
    - + - +
    - - Pop out - + Pop out
    diff --git a/apps/cookbook/src/app/iphone/iphone.component.scss b/apps/cookbook/src/app/iphone/iphone.component.scss index 381773cc6a..8f156682f2 100644 --- a/apps/cookbook/src/app/iphone/iphone.component.scss +++ b/apps/cookbook/src/app/iphone/iphone.component.scss @@ -1,5 +1,6 @@ @use '~@kirbydesign/core/src/scss/utils'; +/* stylelint-disable custom-property-pattern */ .container { text-align: center; } @@ -21,7 +22,7 @@ .docs-demo-device > figure { border-radius: 32px; - box-shadow: 0 0 0 14px #090a0d, 0 0 0 17px #9fa3a8, 0 0 34px 17px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 0 14px #090a0d, 0 0 0 17px #9fa3a8, 0 0 34px 17px rgb(0 0 0 / 20%); height: 0; margin: 0; max-width: 320px; @@ -62,7 +63,7 @@ font-weight: 700; letter-spacing: 0.1em; line-height: 24px; - margin: 0px 3px; + margin: 0 3px; padding: 0 9px; text-transform: uppercase; transition: 200ms background-color ease, 200ms color ease; @@ -96,7 +97,7 @@ } } -.docs-demo-device__ios-notch { +.docs-demo-device-ios-notch { display: none; fill: #090a0d; left: 50%; @@ -107,8 +108,8 @@ z-index: 2; } -.docs-demo-device.ios figure:after { - background-color: rgba(0, 0, 0, 0.5); +.docs-demo-device.ios figure::after { + background-color: rgb(0 0 0 / 50%); border-radius: 2px; bottom: 6px; content: ''; @@ -121,8 +122,8 @@ z-index: 1; } -.docs-demo-device.ios .docs-demo-device__ios-notch, -.docs-demo-device.ios figure:after { +.docs-demo-device.ios .docs-demo-device-ios-notch, +.docs-demo-device.ios figure::after { display: block; } @@ -130,11 +131,11 @@ border-radius: 20px; } -.docs-demo-device__md-bar { +.docs-demo-device-md-bar { display: none; } -.docs-demo-device.md .docs-demo-device__md-bar { +.docs-demo-device.md .docs-demo-device-md-bar { display: block; fill: #090a0d; opacity: 0.1; diff --git a/apps/cookbook/src/app/page/footer/footer.component.scss b/apps/cookbook/src/app/page/footer/footer.component.scss index 7d003a8844..3d433112e3 100644 --- a/apps/cookbook/src/app/page/footer/footer.component.scss +++ b/apps/cookbook/src/app/page/footer/footer.component.scss @@ -5,6 +5,7 @@ background-color: utils.get-color('white'); text-align: center; padding: utils.size('xl') 0; + p { margin: 0; } diff --git a/apps/cookbook/src/app/page/header/header.component.html b/apps/cookbook/src/app/page/header/header.component.html index 8731b45608..f40e09d53b 100644 --- a/apps/cookbook/src/app/page/header/header.component.html +++ b/apps/cookbook/src/app/page/header/header.component.html @@ -9,7 +9,7 @@ x="0px" y="0px" viewBox="0 0 132.3 158.8" - style="enable-background:new 0 0 132.3 158.8;" + style="enable-background: new 0 0 132.3 158.8" xml:space="preserve" >