Added some digi-core components and removed some old/unused css

angular.json

@@ -51,7 +51,7 @@
             "assets": ["apps/dafa-web/src/assets"],
             "styles": ["apps/dafa-web/src/styles/styles.scss"],
             "stylePreprocessorOptions": {
-              "includePaths": ["node_modules/@af/sass", "apps/dafa-web/src/styles"]
+              "includePaths": ["apps/dafa-web/src/styles"]
             },
             "scripts": []
           },

apps/dafa-web/src/app/app.component.html

@@ -8,9 +8,7 @@
   <main id="dafa-main-content" class="dafa__main">
     <dafa-sidebar class="dafa__sidebar"></dafa-sidebar>
     <div class="dafa__content">
-      <digi-ng-typography-base>
+      <router-outlet></router-outlet>
-        <router-outlet></router-outlet>
-      </digi-ng-typography-base>
     </div>
   </main>
 </div>

apps/dafa-web/src/app/app.component.scss

@@ -1,4 +1,3 @@
-@import 'variables/gutters';
 @import 'variables/navigation';
 @import 'variables/breakpoints';
 
@@ -13,13 +12,13 @@
     grid-area: sidebar;
     height: calc(100vh - #{$dafa__navigation-height} - 1px);
 
-    @media (min-width: $af__breakpoint-m) {
+    @media (min-width: $digi--layout--breakpoint--m) {
       height: calc(100vh - #{$dafa__navigation-height-large} - 1px);
     }
   }
 
   &__content {
     grid-area: content;
-    padding: $af__gutter-l;
+    padding: 1.25rem 1.5rem;
   }
 }

apps/dafa-web/src/app/components/navigation/navigation.component.html

@@ -5,7 +5,7 @@
     </a>
   </div>
   <ul class="navigation__list dafa__hide-on-print">
-    <!-- <li class="navigation__item">
+    <li class="navigation__item">
       <a
         class="navigation__link"
         [routerLink]="['/']"
@@ -15,7 +15,7 @@
         <dafa-icon [icon]="iconType.HOME" size="l"></dafa-icon>
         <span class="navigation__text">Startsida</span>
       </a>
-    </li> -->
+    </li>
     <li class="navigation__item" *ngIf="user">
       <div class="navigation__no-link">
         <dafa-icon [icon]="iconType.USER" size="l"></dafa-icon>

apps/dafa-web/src/app/components/navigation/navigation.component.scss

@@ -1,21 +1,19 @@
 @import 'mixins/list';
 @import 'variables/breakpoints';
 @import 'variables/colors';
-@import 'variables/gutters';
-@import 'variables/typography';
 @import 'variables/navigation';
 
 .navigation {
-  background-color: $af__color-primary;
+  background-color: var(--digi--ui--color--background--profile);
-  border-bottom: 1px solid $af__color-background-dark-gray;
+  border-bottom: 1px solid var(--digi--ui--color--background--off);
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 $af__gutter-m;
+  padding: 0 var(--digi--layout--gutter);
   height: $dafa__navigation-height;
 
-  @media (min-width: $af__breakpoint-m) {
+  @media (min-width: $digi--layout--breakpoint--m) {
     height: $dafa__navigation-height-large;
   }
 
@@ -29,7 +27,7 @@
     height: $dafa__navigation-height / 2.5;
     vertical-align: middle;
 
-    @media (min-width: $af__breakpoint-m) {
+    @media (min-width: $digi--layout--breakpoint--m) {
       height: $dafa__navigation-height-large / 2.5;
     }
   }
@@ -43,10 +41,10 @@
   &__item {
     display: flex;
     align-items: center;
-    border-left: 1px solid $af__color-background-dark-gray;
+    border-left: 1px solid var(--digi--ui--color--background--off);
 
     &--no-link {
-      padding: 0 $af__gutter-m;
+      padding: 0 var(--digi--layout--gutter);
       flex-direction: column;
     }
 
@@ -55,7 +53,7 @@
     }
 
     &:last-child {
-      border-right: 1px solid $af__color-background-dark-gray;
+      border-right: 1px solid var(--digi--ui--color--background--off);
     }
   }
 
@@ -66,17 +64,17 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    font-size: $af__font-size-xs;
+    font-size: --digi--typography--font-size--xs;
-    color: $af__color-text-light;
+    color: var(--digi--typography--color--text--light);
     width: 7rem;
     height: 100%;
-    font-weight: $af__font-weight-normal;
+    font-weight: var(--digi--typography--font-weight);
     text-decoration: none;
   }
 
   &__link {
     &:hover {
-      background-color: $af__color-interactive;
+      background-color: $digi--ui--color--primary-light;
     }
 
     &--active {
@@ -87,12 +85,12 @@
         bottom: 0;
         left: 0;
         height: 5px;
-        background-color: $af__color-secondary;
+        background-color: $digi--ui--color--secondary;
       }
     }
   }
 
   &__text {
-    margin-top: $af__gutter-xs;
+    margin-top: var(--digi--layout--gutter--xs);
   }
 }

apps/dafa-web/src/app/components/navigation/navigation.print.component.scss

@@ -1,9 +1,7 @@
-@import 'variables/gutters';
-
 @media print {
   .navigation {
     border-bottom-width: 0;
-    padding: $af__gutter-m 0;
+    padding: var(--digi--layout--gutter) 0;
     display: flex;
   }
 }

apps/dafa-web/src/app/components/sidebar/sidebar.component.scss

@@ -1,15 +1,12 @@
 @import 'variables/colors';
-@import 'variables/gutters';
-@import 'variables/typography';
-@import 'mixins/link';
 @import 'mixins/list';
 
 .sidebar {
   display: flex;
   height: 100%;
   flex-direction: column;
-  background-color: $af__color-background-light-gray;
+  background-color: var(--digi--ui--color--background--secondary);
-  border-right: 1px solid $af__color-background-dark-gray;
+  border-right: 1px solid var(--digi--ui--color--background--off);
 
   &__list {
     @include dafa__reset-list;
@@ -20,18 +17,18 @@
     display: flex;
     align-items: center;
     width: 100%;
-    padding: $af__gutter-s $af__gutter-m;
+    padding: var(--digi--layout--gutter) var(--digi--layout--gutter);
-    border-bottom: 1px solid $af__color-background-dark-gray;
+    border-bottom: 1px solid var(--digi--ui--color--background--off);
-    color: $af__color-text !important;
+    color: var(--digi--typography--color--text) !important;
     text-decoration: none;
-    font-weight: $af__font-weight-normal;
+    font-weight: var(--digi--typography--font-weight);
 
     &:hover {
-      background-color: $af__color-background-gray;
+      background-color: var(--digi--ui--color--background--tertiary);
     }
 
     &--active {
-      font-weight: $af__font-weight-semi-bold;
+      font-weight: var(--digi--typography--font-weight--semibold);
 
       &::before {
         content: '';
@@ -40,7 +37,7 @@
         right: 0;
         bottom: 0;
         width: 5px;
-        background-color: $af__color-primary;
+        background-color: var(--digi--ui--color--primary);
       }
     }
   }

apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.scss

@@ -1,6 +1,4 @@
-@import 'variables/border-radius';
 @import 'variables/colors';
-@import 'variables/gutters';
 
 .skip-to-content {
   position: absolute;
@@ -12,10 +10,10 @@
   overflow: hidden;
   z-index: 1000;
   text-align: center;
-  padding: $af__gutter-xs $af__gutter-m;
+  padding: var(--digi--layout--gutter--xs) var(--digi--layout--gutter);
   display: block;
-  background-color: $dafa__color-pink;
+  background-color: var(--digi--ui--color--complementary-alt);
-  color: $af__color-text-light;
+  color: var(--digi--typography--color--text--light);
 
   &:focus {
     position: fixed;

apps/dafa-web/src/app/pages/call-off/call-off.component.spec.ts

@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
 import { CallOffComponent } from './call-off.component';
 
 describe('CallOffComponent', () => {
@@ -12,7 +10,7 @@ describe('CallOffComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [CallOffComponent],
-        imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+        imports: [RouterTestingModule],
       }).compileComponents();
     })
   );

apps/dafa-web/src/app/pages/messages/messages.component.spec.ts

@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
 import { MessagesComponent } from './messages.component';
 
 describe('MessagesComponent', () => {
@@ -12,7 +10,7 @@ describe('MessagesComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [MessagesComponent],
-        imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+        imports: [RouterTestingModule],
       }).compileComponents();
     })
   );

apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.html

@@ -1,12 +1,10 @@
-<digi-ng-typography-base [afCompressed]="true">
+<digi-typography>
-  <dafa-horizontal-center>
+  <section class="page-not-found">
-    <section class="page-not-found">
+    <h1>Oj då! Vi kan inte hitta sidan.</h1>
-      <h1 class="heading">Oj då! Vi kan inte hitta sidan.</h1>
+    <p>Det kan bero på att länken du använder är felaktig eller att sidan inte längre finns.</p>
-      <p>Det kan bero på att länken du använder är felaktig eller att sidan inte längre finns.</p>
+    <a class="dafa__link dafa__link--with-icon dafa__link--ignore-visited" routerLink="/">
-      <a class="dafa__link dafa__link--with-icon" routerLink="/">
+      <digi-icon-arrow-left class="dafa__digi-icon"></digi-icon-arrow-left>
-        <digi-ng-icon-arrow-left class="dafa__digi-ng-icon" aria-hidden="true"></digi-ng-icon-arrow-left>
+      Gå tillbaka till startsidan
-        Gå tillbaka till startsidan
+    </a>
-      </a>
+  </section>
-    </section>
+</digi-typography>
-  </dafa-horizontal-center>
-</digi-ng-typography-base>

apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.scss

@@ -1,4 +0,0 @@
-.page-not-found {
-  text-align: center;
-  padding: 5rem;
-}

apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.spec.ts

@@ -1,8 +1,5 @@
-import { DigiNgIconArrowLeftModule } from '@af/digi-ng/_icon/icon-arrow-left';
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
 import { PageNotFoundComponent } from './page-not-found.component';
 
 describe('PageNotFoundComponent', () => {
@@ -13,7 +10,7 @@ describe('PageNotFoundComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [PageNotFoundComponent],
-        imports: [RouterTestingModule, DigiNgTypographyBaseModule, DigiNgIconArrowLeftModule, HorizontalCenterModule],
+        imports: [RouterTestingModule],
       }).compileComponents();
     })
   );

apps/dafa-web/src/app/pages/page-not-found/page-not-found.module.ts

@@ -1,19 +1,11 @@
-import { DigiNgIconArrowLeftModule } from '@af/digi-ng/_icon/icon-arrow-left';
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
 import { PageNotFoundComponent } from './page-not-found.component';
 
 @NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [PageNotFoundComponent],
-  imports: [
+  imports: [CommonModule, RouterModule.forChild([{ path: '', component: PageNotFoundComponent }])],
-    CommonModule,
-    RouterModule.forChild([{ path: '', component: PageNotFoundComponent }]),
-    DigiNgTypographyBaseModule,
-    DigiNgIconArrowLeftModule,
-    HorizontalCenterModule,
-  ],
 })
 export class PageNotFoundModule {}

apps/dafa-web/src/app/pages/participants/participants.component.html

@@ -1 +1,8 @@
-<section class="participants">Mina deltagare funkar!</section>
+<digi-typography>
+  <h1>Mina deltagare</h1>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna neque, interdum vel massa eget, condimentum
+    rutrum velit. Sed vitae ullamcorper sem. Aliquam malesuada nunc sed purus mollis scelerisque. Curabitur bibendum leo
+    quis ante porttitor tincidunt. Nam tincidunt imperdiet tortor eu suscipit. Maecenas ut dui est.
+  </p>
+</digi-typography>

apps/dafa-web/src/app/pages/participants/participants.component.spec.ts

@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
 import { ParticipantsComponent } from './participants.component';
 
 describe('ParticipantsComponent', () => {
@@ -12,7 +10,7 @@ describe('ParticipantsComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [ParticipantsComponent],
-        imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+        imports: [RouterTestingModule],
       }).compileComponents();
     })
   );

apps/dafa-web/src/app/pages/participants/participants.module.ts

@@ -1,9 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { ParticipantsComponent } from './participants.component';
 
 @NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [ParticipantsComponent],
   imports: [CommonModule, RouterModule.forChild([{ path: '', component: ParticipantsComponent }])],
 })

apps/dafa-web/src/app/pages/settings/settings.component.spec.ts

@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
 import { SettingsComponent } from './settings.component';
 
 describe('SettingsComponent', () => {
@@ -12,7 +10,7 @@ describe('SettingsComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [SettingsComponent],
-        imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+        imports: [RouterTestingModule],
       }).compileComponents();
     })
   );

apps/dafa-web/src/app/pages/start/start.component.spec.ts

@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
 import { StartComponent } from './start.component';
 
 describe('StartComponent', () => {
@@ -12,7 +10,7 @@ describe('StartComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [StartComponent],
-        imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+        imports: [RouterTestingModule],
       }).compileComponents();
     })
   );

apps/dafa-web/src/app/pages/statistics/statistics.component.spec.ts

@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
 import { StatisticsComponent } from './statistics.component';
 
 describe('StatisticsComponent', () => {
@@ -12,7 +10,7 @@ describe('StatisticsComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [StatisticsComponent],
-        imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+        imports: [RouterTestingModule],
       }).compileComponents();
     })
   );

apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.html

@@ -1,3 +0,0 @@
-<div class="horizontal-center">
-  <ng-content></ng-content>
-</div>

apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.scss

@@ -1,10 +0,0 @@
-@import 'variables/breakpoints';
-@import 'variables/containers';
-@import 'variables/gutters';
-
-.horizontal-center {
-  width: 100%;
-  max-width: $af__breakpoint-xl;
-  padding: 0 $af__gutter-m;
-  margin: 0 auto;
-}

apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { HorizontalCenterComponent } from './horizontal-center.component';
-
-describe('HorizontalCenterComponent', () => {
-  let component: HorizontalCenterComponent;
-  let fixture: ComponentFixture<HorizontalCenterComponent>;
-
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [HorizontalCenterComponent],
-      }).compileComponents();
-    })
-  );
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HorizontalCenterComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.ts

@@ -1,9 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-@Component({
-  selector: 'dafa-horizontal-center',
-  templateUrl: './horizontal-center.component.html',
-  styleUrls: ['./horizontal-center.component.scss', './horizontal-center.print.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class HorizontalCenterComponent {}

apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.module.ts

@@ -1,11 +0,0 @@
-import { DigiNgLayoutContainerModule } from '@af/digi-ng/_layout/layout-container';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { HorizontalCenterComponent } from './horizontal-center.component';
-
-@NgModule({
-  declarations: [HorizontalCenterComponent],
-  imports: [CommonModule, DigiNgLayoutContainerModule],
-  exports: [HorizontalCenterComponent],
-})
-export class HorizontalCenterModule {}

apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.print.component.scss

@@ -1,5 +0,0 @@
-@media print {
-  .horizontal-center {
-    padding: 0;
-  }
-}

apps/dafa-web/src/app/shared/components/icon/icon.component.html

@@ -20,10 +20,10 @@
 </digi-ng-icon-custom>
 
 <ng-template #DigiNgIcon>
-  <digi-ng-icon-user-alt *ngIf="icon === iconType.USER" [ngClass]="iconClass"></digi-ng-icon-user-alt>
+  <digi-icon-user-alt *ngIf="icon === iconType.USER" [ngClass]="iconClass"></digi-icon-user-alt>
-  <digi-ng-icon-users-solid *ngIf="icon === iconType.USERS" [ngClass]="iconClass"></digi-ng-icon-users-solid>
+  <digi-icon-users-solid *ngIf="icon === iconType.USERS" [ngClass]="iconClass"></digi-icon-users-solid>
-  <digi-ng-icon-bell *ngIf="icon === iconType.BELL" [ngClass]="iconClass"></digi-ng-icon-bell>
+  <digi-icon-bell *ngIf="icon === iconType.BELL" [ngClass]="iconClass"></digi-icon-bell>
-  <digi-ng-icon-calendar-alt *ngIf="icon === iconType.CALENDAR" [ngClass]="iconClass"></digi-ng-icon-calendar-alt>
+  <digi-icon-calendar-alt *ngIf="icon === iconType.CALENDAR" [ngClass]="iconClass"></digi-icon-calendar-alt>
-  <digi-ng-icon-envelope-filled *ngIf="icon === iconType.ENVELOPE" [ngClass]="iconClass"></digi-ng-icon-envelope-filled>
+  <digi-icon-envelope-filled *ngIf="icon === iconType.ENVELOPE" [ngClass]="iconClass"></digi-icon-envelope-filled>
-  <digi-ng-icon-sokkandidat *ngIf="icon === iconType.SOK_KANDIDAT" [ngClass]="iconClass"></digi-ng-icon-sokkandidat>
+  <digi-icon-sokkandidat *ngIf="icon === iconType.SOK_KANDIDAT" [ngClass]="iconClass"></digi-icon-sokkandidat>
 </ng-template>

apps/dafa-web/src/main.ts

@@ -1,6 +1,6 @@
+import { defineCustomElements } from '@af/digi-core/loader';
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
@@ -10,4 +10,6 @@ if (environment.production) {
 
 platformBrowserDynamic()
   .bootstrapModule(AppModule)
-  .catch((err) => console.error(err));
+  .catch(err => console.error(err));
+
+defineCustomElements();

apps/dafa-web/src/styles/functions/_u.scss

@@ -1 +0,0 @@
-@import '~@af/sass/v2/layout/functions/u';

apps/dafa-web/src/styles/mixins/_a11y.scss

@@ -1,5 +1,13 @@
-@import '~@af/sass/v2/a11y/mixins/a11y__sr-only';
+@mixin dafa__a11y-sr-only {
-
+  border: 0;
-@mixin af__a11y-sr-only {
+  clip: rect(1px, 1px, 1px, 1px);
-  @include a11y__sr-only;
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
 }

apps/dafa-web/src/styles/mixins/_button.scss

@@ -1,49 +0,0 @@
-@import 'variables/colors';
-@import 'variables/gutters';
-
-@mixin dafa__base-button {
-  position: relative;
-  border-width: 0;
-  background-color: transparent;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  cursor: pointer;
-  font-size: 0.875rem;
-  padding: $af__gutter-xs $af__gutter-m;
-}
-
-@mixin dafa__link-as-button {
-  text-decoration: none !important; // Needs important to override style from default anchor tag.
-
-  &:hover {
-    text-decoration: none !important; // Needs important to override style from default anchor tag.
-  }
-}
-
-@mixin dafa__white-button-with-border {
-  @include dafa__base-button;
-  background-color: $af__color-background-white;
-  color: $af__color-primary !important; // Needs important to override style from default anchor tag.
-  border: 1px solid $af__color-primary;
-  border-radius: 5px;
-
-  &:hover {
-    background-color: #f1f8fe;
-    color: $af__color-primary !important; // Needs important to override style from default anchor tag.
-  }
-}
-
-@mixin dafa__button-as-link($dark: false) {
-  background-color: transparent;
-  border-width: 0;
-  padding: 0;
-  margin: 0;
-  color: if($dark, $dafa__color-link-light, $af__color-link);
-
-  &:hover {
-    color: if($dark, $dafa__color-link-light-active, $af__color-link-active);
-    text-decoration: underline;
-  }
-}

apps/dafa-web/src/styles/mixins/_form.scss

@@ -1,65 +0,0 @@
-@import '~@af/sass/v2/form/mixins/form__checkbox';
-@import '~@af/sass/v2/form/mixins/form__checkbox-check';
-@import '~@af/sass/v2/form/mixins/form__checkbox-base';
-@import '~@af/sass/v2/form/mixins/form__form-field--focus';
-@import '~@af/sass/v2/form/mixins/form__form-field--disabled';
-@import '~@af/sass/v2/form/mixins/form__select-input';
-@import '~@af/sass/v2/form/mixins/form__select-arrow';
-@import '~@af/sass/v2/form/mixins/form__radiobutton';
-@import 'variables/colors';
-@import 'variables/gutters';
-@import 'variables/typography';
-
-@mixin af__form-checkbox($secondary: false, $disabled: false) {
-  @include form__checkbox($secondary, $disabled);
-}
-
-@mixin af__form-checkbox-check($disabled: false) {
-  @include form__checkbox-check($disabled);
-}
-
-@mixin af__form-checkbox-base {
-  @include form__checkbox-base;
-}
-
-@mixin af__form-field-focus {
-  @include form__form-field--focus;
-}
-
-@mixin af__form-field-disabled {
-  @include form__form-field--disabled;
-}
-
-@mixin af__form-select-input {
-  @include form__select-input;
-}
-
-@mixin af__form-select-arrow($disabled: false) {
-  @include form__select-arrow($disabled);
-}
-
-@mixin af__form-radiobutton {
-  @include form__radiobutton;
-}
-
-@mixin dafa__fieldset-reset($legendAsHeading: true) {
-  margin: 0;
-  padding: 0;
-  border-width: 0;
-
-  legend {
-    position: relative;
-    text-align: left;
-
-    @if $legendAsHeading {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      padding-bottom: $af__gutter-xs;
-      margin: 0;
-      font-weight: $af__font-weight-bold;
-      font-size: $af__font-size-s;
-      border-bottom: 1px solid $af__color-border-light;
-    }
-  }
-}

apps/dafa-web/src/styles/mixins/_gutter.scss

@@ -1,8 +0,0 @@
-@import 'variables/gutters';
-
-@mixin dafa__option-gutter-reset {
-  line-height: unset;
-  height: auto;
-  padding-top: $af__gutter-xs;
-  padding-bottom: $af__gutter-xs;
-}

apps/dafa-web/src/styles/mixins/_link.scss

@@ -1,20 +0,0 @@
-@import 'variables/colors';
-
-@mixin dafa__link-style($with-hover: true) {
-  padding: 0;
-  cursor: pointer;
-  color: $af__color-link;
-  text-align: left;
-  white-space: normal;
-
-  @if $with-hover {
-    &:hover {
-      @include dafa__link-hover-style();
-    }
-  }
-}
-
-@mixin dafa__link-hover-style {
-  color: $af__color-link-active;
-  text-decoration: underline;
-}

apps/dafa-web/src/styles/mixins/_ribbon.scss

@@ -1,7 +0,0 @@
-$ribbon-position: 0.5rem;
-
-@mixin dafa__ribbon-wrapper {
-  position: absolute;
-  top: $ribbon-position * 2;
-  right: -$ribbon-position;
-}

apps/dafa-web/src/styles/mixins/_typography.scss

@@ -1,23 +0,0 @@
-@import '~@af/sass/v2/typography/mixins/typography__text';
-@import 'functions/u';
-
-@mixin af__typography-text {
-  @include typography__text($compressed: true, $unthemable: true);
-}
-
-@mixin dafa__typography-ornament {
-  &::after {
-    content: '';
-    display: block;
-    margin-top: u(6);
-    height: u(1.4);
-    max-width: u(38);
-    background: $ui__color--primary;
-
-    @media (min-width: $layout__breakpoint--l) {
-      height: u(2);
-      width: 100%;
-      max-width: u(44);
-    }
-  }
-}

apps/dafa-web/src/styles/mixins/ie11.scss

@@ -1,5 +0,0 @@
-@mixin ie11 {
-  @media all and (-ms-high-contrast: none) {
-    @content;
-  }
-}

apps/dafa-web/src/styles/styles.scss

@@ -1,12 +1,9 @@
-@import 'variables/colors';
+@import '~@af/digi-core/src/global/styles/digi';
-@import 'variables/gutters';
-@import 'variables/typography';
 @import 'mixins/a11y';
-@import 'mixins/button';
 @import 'mixins/icon';
 
 * {
-  font-family: $af__font-family;
+  font-family: var(--digi--typography--font-family);
   box-sizing: border-box;
 
   ::before,
@@ -17,36 +14,20 @@
 
 body {
   margin: 0;
-  font-weight: $af__font-weight-normal;
+  font-weight: var(--digi--typography--font-weight);
-}
-
-button {
-  @include dafa__base-button;
 }
 
 strong {
-  font-weight: $af__font-weight-semi-bold;
+  font-weight: var(--digi--typography--font-weight--semibold);
-}
-
-.af__a11y-sr-only {
-  @include af__a11y-sr-only;
 }
 
 .dafa {
-  &__digi-ng-icon {
+  &__a11y-sr-only {
-    @include dafa__digi-ng-icon;
+    @include dafa__a11y-sr-only;
-
-    &--right-margin {
-      margin-right: $af__gutter-s;
-    }
-    &--left-margin {
-      margin-left: $af__gutter-m;
-    }
   }
 
-  &__highlight-characters {
+  &__digi-icon {
-    background-color: transparent;
+    display: inline-flex;
-    font-weight: $af__font-weight-bold;
   }
 
   &__link {
@@ -54,24 +35,15 @@ strong {
     align-items: center;
 
     &--with-icon {
-      gap: $af__gutter-xs;
+      gap: var(--digi--layout--gutter--xs);
-    }
+    }
-  }
+
-}
+    &--ignore-visited:visited {
-
+      color: var(--digi--typography--color--link);
-// @af/digi-ng overrides
+
-.digi-ng-typography-icon-text__icon {
+      &:hover {
-  display: inline-flex;
+        color: var(--digi--typography--color--link--active);
-}
+      }
-
-@media print {
-  * {
-    color: $af__color-text-dark !important;
-  }
-
-  .dafa {
-    &__hide-on-print {
-      display: none !important;
     }
   }
 }

apps/dafa-web/src/styles/variables/_border-radius.scss

@@ -1,3 +0,0 @@
-@import '~@af/sass/v2/ui/variables/ui__borders';
-
-$af__border-radius: $ui__border-radius--rounded;

apps/dafa-web/src/styles/variables/_box-shadow.scss

@@ -1,5 +0,0 @@
-@import '~@af/sass/v2/ui/variables/ui__variables';
-@import '~@af/sass/v2/ui/variables/ui__shadows';
-
-$af__box-shadow: $ui__box-shadow--elevated;
-$af__box-shadow-interactive-focus-outline: $ui__shadow--interactive-focus-outline;

apps/dafa-web/src/styles/variables/_breakpoints.scss

@@ -1,13 +1 @@
-@import '~@af/sass/v2/layout/variables/layout__variables';
+@import '~@af/digi-core/src/global/styles/layout/variables/layout__variables';
-
-// AF variables
-$af__breakpoint-s: $layout__breakpoint--s; // 576px
-$af__breakpoint-s-below: $af__breakpoint-s - 1; // 575px
-$af__breakpoint-m: $layout__breakpoint--m; // 768px
-$af__breakpoint-m-below: $af__breakpoint-m - 1; // 767px
-$af__breakpoint-l: $layout__breakpoint--l; // 992px
-$af__breakpoint-l-below: $af__breakpoint-l - 1; // 991px
-$af__breakpoint-xl: $layout__breakpoint--xl; // 1200px
-$af__breakpoint-xl-below: $af__breakpoint-xl - 1; // 1199px
-
-// Local variables

apps/dafa-web/src/styles/variables/_colors.scss

@@ -1,71 +1,6 @@
-@import '~@af/sass/v2/ui/variables/ui__colors';
+@import '~@af/digi-core/src/global/styles/ui/variables/ui__variables';
-@import '~@af/sass/v2/typography/variables/typography__variables';
 
-// AF variables
+// AF DIGI Variables
-$af__color-primary: $ui__color--primary;
+$digi--ui--color--primary-light: lighten($digi--ui--color--primary, 10%);
-$af__color-secondary: $ui__color--secondary;
-$af__color-complementary: $ui__color--complementary;
-$af__color-complementary-alt: $ui__color--complementary-alt;
-$af__color-interactive: $ui__color--interactive;
-$af__color--background-alt-secondary: $ui__color--background-alt-secondary;
-
-$af__color-info: $ui__color--informative;
-$af__color-success: $ui__color--success;
-$af__color-danger: $ui__color--danger;
-$af__color-warning: $ui__color--warning;
-
-$af__color-approved: $ui__color--approved;
-$af__color-action-needed: $ui__color--action-needed;
-$af__color-denied: $ui__color--denied;
-$af__color-missing: $ui__color--missing;
-
-$af__color-text-light: $typography__color--text-light;
-$af__color-text-dimmed: $typography__color--text-dimmed;
-$af__color-text-dimmed-alt: $typography__color--text-dimmed-alt;
-$af__color-text: $typography__color--text;
-$af__color-text-dark: $typography__color--text-dark;
-$af__color-text-disabled: $typography__color--text-disabled;
-
-$af__color-link: $typography__color--link;
-$af__color-link-active: $typography__color--link-active;
-$af__color-link-visited: $typography__color--link-visited;
-
-$af__color-background-white: $ui__color--background;
-$af__color-background-light-gray: $ui__color--background-alt;
-$af__color-background-gray: $ui__color--background-alt-secondary;
-$af__color-background-dark-gray: $ui__color--background-off;
-$af__color-background-dark: $ui__color--background-dark;
-$af__color-background-alt-tertiary: $ui__color--background-alt-tertiary;
-
-$af__color-border: $ui__color--border;
-$af__color-border-dark: $ui__color--border-dark;
-$af__color-border-light: $ui__color--border-light;
-$af__color-separator: $ui__color--separator;
-$af__color-background-warning: $ui__color--yellow-light;
-
-$af__color-disabled: $ui__color--disabled;
 
 // Local variables
-$dafa__color-pink: #d43372;
-$dafa__color-primary-20: #ccccde;
-$dafa__color-link-light: $af__color-text-light;
-$dafa__color-link-light-active: darken($af__color-text-light, 10%);
-
-$dafa__color-fub: #666666;
-$dafa__color-fub-dark: darken($dafa__color-fub, 30%);
-$dafa__color-fub-text: $af__color-text-light;
-$dafa__color-aub: #1616b2;
-$dafa__color-aub-dark: darken($dafa__color-aub, 30%);
-$dafa__color-aub-text: $af__color-text-light;
-$dafa__color-aub-test: #058470;
-$dafa__color-aub-test-dark: darken($dafa__color-aub-test, 30%);
-$dafa__color-aub-test-text: $af__color-text-light;
-$dafa__color-folkhogskola: #d43372;
-$dafa__color-folkhogskola-dark: darken($dafa__color-folkhogskola, 30%);
-$dafa__color-folkhogskola-text: $af__color-text-light;
-$dafa__color-rek: #fddc41;
-$dafa__color-rek-dark: darken($dafa__color-rek, 30%);
-$dafa__color-rek-text: $af__color-text-dark;
-$dafa__color-anstalt: #e21c50;
-$dafa__color-anstalt-dark: darken($dafa__color-anstalt, 30%);
-$dafa__color-anstalt-text: $af__color-text-light;

apps/dafa-web/src/styles/variables/_containers.scss

@@ -1,10 +0,0 @@
-@import '~@af/sass/v2/layout/variables/layout__variables';
-
-// AF variables
-$af__container-width-xs: $layout__container--width-xs;
-$af__container-width-s: $layout__container--width-s;
-$af__container-width-m: $layout__container--width-m;
-$af__container-width-l: $layout__container--width-l;
-$af__container-width-xl: $layout__container--width-xl;
-
-// Local variables

apps/dafa-web/src/styles/variables/_form.scss

@@ -1,9 +0,0 @@
-@import '~@af/sass/v2/ui/variables/ui__variables';
-
-// AF variables
-$af__form-input-height: $ui__input-height;
-$af__form-input-height-s: $ui__input-height--s;
-$af__form-input-height-l: $ui__input-height--l;
-$af__form-input-border: $ui__input-border; // 1px solid $ui__color--border
-
-// Local variables

apps/dafa-web/src/styles/variables/_gutters.scss

@@ -1,14 +0,0 @@
-@import '~@af/sass/v2/layout/variables/layout__variables';
-@import '~@af/sass/v2/layout/functions/u';
-
-// AF variables
-$af__gutter-goliath: u(15); // 75px
-$af__gutter-xxl: u(7); // 35px
-$af__gutter-xl: u(5); // 25px
-$af__gutter-l: $layout__gutter--l; // 20px
-$af__gutter-m: $layout__gutter; // 15px
-$af__gutter-s: $layout__gutter--s; // 10px
-$af__gutter-xs: $layout__gutter--xs; // 5px
-$af__gutter-xxs: $layout__gutter--xxs; // 2.5px
-
-// Local variables

apps/dafa-web/src/styles/variables/_shadows.scss

@@ -1,4 +0,0 @@
-@import '~@af/sass/v2/ui/variables/ui__shadows';
-
-// AF variables
-$af__shadow-base: $ui__shadow--shadow-base-outline;

apps/dafa-web/src/styles/variables/_typography.scss

@@ -1,28 +0,0 @@
-@import '~@af/sass/v2/typography/variables/typography__variables';
-
-// AF variables
-$af__font-weight-normal: $typography__font-weight; // 400
-$af__font-weight-semi-bold: $typography__font-weight--semibold; // 600
-$af__font-weight-bold: $typography__font-weight--bold; // 700
-
-$af__font-family: $typography__font-family; // 'Open sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-$af__font-size: $typography__font-size; // 1rem
-$af__font-size-xs: $typography__font-size--xs; // .875rem
-$af__font-size-s: $typography__font-size--s; // .9375rem
-$af__font-size-m: $typography__font-size--m; // 1.25rem
-$af__font-size-heading: $typography__font-size--heading; // 1.125rem
-$af__font-size-h1: $typography__font-size--h1; // 1.75rem
-$af__font-size-h2: $typography__font-size--h2; // 1.375rem
-$af__font-size-h3: $typography__font-size--h3; // 1.125rem
-$af__font-size-desktop: $typography__font-size-desktop; // 1.125rem
-$af__font-size-desktop-xs: $typography__font-size-desktop--xs; // .9375rem
-$af__font-size-desktop-s: $typography__font-size-desktop--s; // 1rem
-$af__font-size-desktop-heading: $typography__font-size-desktop--heading; // 1.375rem
-$af__font-size-desktop-h1: $typography__font-size-desktop--h1; // 2.5rem
-$af__font-size-desktop-h2: $typography__font-size-desktop--h2; // 1.75rem
-$af__font-size-desktop-h3: $typography__font-size-desktop--h3; // 1.375rem
-$af__font-size-desktop-compressed: $typography__font-size-desktop--compressed; // 1rem
-$af__font-size-desktop-h1-compressed: $typography__font-size-desktop--h1-compressed; // 1.75rem
-
-// Local variables
-$dafa__font-size-h1: 1.5rem;

package-lock.json

@@ -12,7 +12,6 @@
         "@af/auth": "^11.1.0",
         "@af/digi-core": "^5.0.0",
         "@af/digi-ng": "^12.1.0",
-        "@af/sass": "^10.2.4",
         "@angular/animations": "^11.2.0",
         "@angular/common": "^11.2.0",
         "@angular/compiler": "^11.2.0",
@@ -148,12 +147,6 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "license": "0BSD"
     },
-    "node_modules/@af/sass": {
-      "version": "10.2.4",
-      "resolved": "http://nexus.arbetsformedlingen.se/repository/npm/@af/sass/-/sass-10.2.4.tgz",
-      "integrity": "sha512-Ok1Je9QGnFHVN/txTS56oTpdkE9uqzfXwoEeIfqc+g7ehZ2aprdVPULtLKO6ePM8ltLsuqPxFQK0CYj44+sHxg==",
-      "license": "MIT"
-    },
     "node_modules/@angular-devkit/architect": {
       "version": "0.1100.7",
       "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1100.7.tgz",
@@ -25174,11 +25167,6 @@
         }
       }
     },
-    "@af/sass": {
-      "version": "10.2.4",
-      "resolved": "http://nexus.arbetsformedlingen.se/repository/npm/@af/sass/-/sass-10.2.4.tgz",
-      "integrity": "sha512-Ok1Je9QGnFHVN/txTS56oTpdkE9uqzfXwoEeIfqc+g7ehZ2aprdVPULtLKO6ePM8ltLsuqPxFQK0CYj44+sHxg=="
-    },
     "@angular-devkit/architect": {
       "version": "0.1100.7",
       "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1100.7.tgz",

package.json

@@ -36,7 +36,6 @@
     "@af/auth": "^11.1.0",
     "@af/digi-core": "^5.0.0",
     "@af/digi-ng": "^12.1.0",
-    "@af/sass": "^10.2.4",
     "@angular/animations": "^11.2.0",
     "@angular/common": "^11.2.0",
     "@angular/compiler": "^11.2.0",