feat(theme): 🎨 apps/theme enabled in all linters

.eslintignore

@@ -5,5 +5,3 @@ packages/theme/brand/**/*
 packages/react-old/**/*
 tsc-build/
 .storybook
-
-apps/theme/**

.eslintrc.cjs

@@ -35,6 +35,7 @@ module.exports = {
           './tsconfig.json',
           './packages/*/tsconfig.json',
           './tsconfig.node.json',
+          './apps/*/tsconfig.json'
         ],
       },
       rules: {

.stylelintignore

@@ -1,4 +1,5 @@
 **/dist/**/*.css
 packages/theme/brand/**/*.css
 packages/css/dist/**/*.css
-apps/theme/**
+
+apps/theme/src/css/bootstrap-grid.css

apps/theme/src/app/components/Color/Color.module.css

@@ -6,13 +6,13 @@
   justify-content: center;
   color: black;
   font-weight: 400;
-  border: 1px solid rgb(228, 228, 228);
+  border: 1px solid rgb(228 228 228);
   border-radius: 4px;
 }
 
 .box:hover {
   cursor: pointer;
-  border-color: #ffffff;
+  border-color: #fff;
   outline: 2px solid #535353;
   outline-offset: 1px;
 }
@@ -30,7 +30,7 @@
   height: 15px;
   width: 15px;
   border-radius: 50%;
-  border: 1px solid rgb(160, 160, 160);
+  border: 1px solid rgb(160 160 160);
 }
 
 .contrast {

apps/theme/src/app/components/ColorPicker/ColorPicker.module.css

@@ -13,21 +13,21 @@
   width: 150px;
   padding-left: 12px;
   transition: 0.04s all;
-  border: 1px solid rgb(192, 192, 192);
+  border: 1px solid rgb(192 192 192);
   background-color: transparent;
 }
 
 .container:hover {
-  border: 1px solid rgb(61, 61, 61);
-  outline: 1px solid rgb(61, 61, 61);
+  border: 1px solid rgb(61 61 61);
+  outline: 1px solid rgb(61 61 61);
 }
 
 .color {
   height: 24px;
   width: 24px;
   background-color: #1e98f5;
   border-radius: 50%;
-  border: 1px solid rgb(206, 206, 206);
+  border: 1px solid rgb(206 206 206);
 }
 
 .input {

apps/theme/src/app/components/Group/Group.module.css

@@ -1,15 +1,15 @@
 .colors {
   display: flex;
   gap: 8px;
-  border-radius: 0px;
+  border-radius: 0;
 }
 
 .colorsFeatured {
   /* padding: 0 14px; */
 }
 
 .header {
-  border-bottom: 1px solid #cccccc;
+  border-bottom: 1px solid #ccc;
   margin-bottom: 16px;
   padding-bottom: 16px;
   text-align: center;

apps/theme/src/app/components/Header/Header.module.css

@@ -18,7 +18,7 @@
 }
 
 .links a:hover {
-  border-color: rgb(212, 212, 212);
+  border-color: rgb(212 212 212);
 }
 
 .container {
@@ -29,7 +29,7 @@
 }
 
 .active {
-  border-color: rgb(185, 185, 185) !important;
+  border-color: rgb(185 185 185) !important;
   font-weight: 500;
 }
 

apps/theme/src/app/components/Header/Header.tsx

@@ -1,8 +1,10 @@
 import { Container } from 'react-bootstrap';
 import Link from 'next/link';
-import classes from './Header.module.css';
 import { usePathname } from 'next/navigation';
 
+import classes from './Header.module.css';
+
+
 export const Header = () => {
   const currentPath = usePathname();
   return (
@@ -10,7 +12,7 @@
       <Container className={classes.container}>
         <div className={classes.logoContainer}>
           <Link href='/'>
             <img
               src='img/logo.svg'
               alt=''
             />

apps/theme/src/app/components/PreviewBox/PreviewBox.module.css

@@ -1,13 +1,13 @@
 .box {
-  border: 1px solid rgb(235, 235, 235);
+  border: 1px solid rgb(235 235 235);
+
   /* background-color: var(--fds-semantic-background-default); */
   width: 100%;
-
   padding: 32px;
   border-radius: 8px;
   display: flex;
   gap: 32px;
-  box-shadow: 0px 0px 24px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 24px 4px rgb(0 0 0 / 0.1);
 }
 
 .input {

apps/theme/src/app/components/Previews/Components/Components.module.css

@@ -4,14 +4,13 @@
   width: 100%;
   padding: 24px;
   display: flex;
-
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   grid-template-areas:
-    "checkbox checkbox checkbox user user user table table table table table table"
-    "help help help help help help radio radio radio tag tag tag"
-    "tabs tabs tabs tabs test test test faq faq faq faq faq"
-    "footerOne footerOne footerOne footerOne footerTwo footerTwo footerTwo footerTwo footerThree footerThree footerThree footerThree";
+    'checkbox checkbox checkbox user user user table table table table table table'
+    'help help help help help help radio radio radio tag tag tag'
+    'tabs tabs tabs tabs test test test faq faq faq faq faq'
+    'footerOne footerOne footerOne footerOne footerTwo footerTwo footerTwo footerTwo footerThree footerThree footerThree footerThree';
   column-gap: 24px;
   row-gap: 24px;
 }
@@ -64,6 +63,17 @@
   margin-top: -7px;
 }
 
+.tabs {
+  grid-area: tabs;
+  display: flex;
+  gap: 16px;
+  flex-direction: column;
+}
+
+.tabs button {
+  min-height: 40px;
+}
+
 .tableContainer {
   grid-area: table;
 }
@@ -94,7 +104,7 @@
   height: 36px;
   width: 36px;
   border-radius: 50%;
-  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0 4px rgb(0 0 0 / 0.25);
 }
 
 .tableAction {
@@ -139,28 +149,35 @@
 .helpFirst {
   border-color: var(--fds-semantic-border-first);
 }
+
 .helpFirstTitle {
   color: var(--brandOne12);
 }
+
 .helpFirstDesc {
   color: var(--brandOne12);
 }
 
 .helpSecond {
   border-color: var(--fds-semantic-border-second);
 }
+
 .helpSecondTitle {
   color: var(--brandTwo12);
 }
+
 .helpSecondDesc {
   color: var(--brandTwo12);
 }
+
 .helpThird {
   border-color: var(--fds-semantic-border-third);
 }
+
 .helpThirdTitle {
   color: var(--brandThree12);
 }
+
 .helpThirdDesc {
   color: var(--brandThree12);
 }
@@ -203,17 +220,6 @@
   margin-top: 16px;
 }
 
-.tabs {
-  grid-area: tabs;
-  display: flex;
-  gap: 16px;
-  flex-direction: column;
-}
-
-.tabs button {
-  min-height: 40px;
-}
-
 .faq {
   grid-area: faq;
 }

apps/theme/src/app/components/Previews/Dashboard/Dashboard.module.css

@@ -106,8 +106,8 @@
   row-gap: 24px;
   column-gap: 24px;
   grid-template-areas:
-    "colorcards colorcards colorcards colorcards colorcards colorcards colorcards colorcards users users users users"
-    "graph graph graph graph graph2 graph2 graph2 graph2 graph3 graph3 graph3 graph3";
+    'colorcards colorcards colorcards colorcards colorcards colorcards colorcards colorcards users users users users'
+    'graph graph graph graph graph2 graph2 graph2 graph2 graph3 graph3 graph3 graph3';
 }
 
 .users {
@@ -129,18 +129,20 @@
 
 .userName {
   font-size: 16px;
+  color: var(--grey13);
 }
 
 .user img {
   width: 44px;
   height: 44px;
   border-radius: 50%;
-  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.2);
 }
 
 .userTextContainer {
   display: flex;
   gap: 4px;
+  flex-direction: column;
 }
 
 .userRole {
@@ -159,15 +161,6 @@
   color: var(--brandThree12);
 }
 
-.userName {
-  color: var(--grey13);
-}
-
-.userTextContainer {
-  display: flex;
-  flex-direction: column;
-}
-
 .graph {
   grid-area: graph;
   height: 400px;

apps/theme/src/app/components/Previews/Landing/Landing.module.css

@@ -45,7 +45,7 @@
 .headerRight {
   display: flex;
   align-items: center;
-  gap: 0px;
+  gap: 0;
 }
 
 .headerMiddle {

apps/theme/src/app/components/Scale/Scale.tsx

@@ -1,9 +1,8 @@
 import { useEffect, useState } from 'react';
 import type { CssColor } from '@adobe/leonardo-contrast-colors';
 
-import { generateColorScale } from '@/utils/themeUtils';
-import type { modeType, ColorsType } from '@/types';
-
+import type { modeType, ColorsType } from '../../../types';
+import { generateColorScale } from '../../../utils/themeUtils';
 import { Group } from '../Group/Group';
 
 import classes from './Scale.module.css';

apps/theme/src/app/components/ScaleRow/ScaleRow.module.css

@@ -22,7 +22,7 @@
 }
 
 .red {
-  color: rgb(212, 0, 0);
+  color: rgb(212 0 0);
 }
 
 .contrast {
@@ -37,7 +37,7 @@
   align-items: center;
   margin-top: 10px;
   margin-bottom: 16px;
-  border: 1px solid rgb(206, 206, 206);
+  border: 1px solid rgb(206 206 206);
   border-radius: 4px;
   font-size: 16px;
   position: relative;
@@ -56,6 +56,7 @@
   height: 150px;
   width: 170px;
   margin-top: 2px;
+
   /* padding: 20px; */
   margin-right: 48px;
   border-radius: 4px;

apps/theme/src/app/components/ScaleRow/ScaleRow.tsx

@@ -5,9 +5,8 @@ import { CheckmarkIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { ChromePicker } from "react-color";
 import { useClickOutside } from "@react-awesome/use-click-outside";
 
-import type { modeType } from "@/types";
-import { getRatioFromLum, luminanceFromHex } from "@/utils/ColorUtils";
-
+import type { modeType } from "../../../types";
+import { getRatioFromLum, luminanceFromHex } from "../../../utils/ColorUtils";
 import { Scale } from "../Scale/Scale";
 
 import classes from "./ScaleRow.module.css";
@@ -20,7 +19,7 @@ type ScaleRowProps = {
 };
 
 export const ScaleRow = ({
-  color,
+  color = "#00000",
   showHeader,
   name,
   themeMode,
@@ -31,8 +30,8 @@ export const ScaleRow = ({
   const ref = useRef(null);
 
   useEffect(() => {
-    const lum1 = luminanceFromHex(color);
-    const lum2 = luminanceFromHex("#ffffff");
+    const lum1 = luminanceFromHex(color) as number;
+    const lum2 = luminanceFromHex("#ffffff") as number;
     const ratio = getRatioFromLum(lum1, lum2);
     setContrast(ratio);
     setActiveColor(color);
@@ -67,13 +66,14 @@ export const ScaleRow = ({
           >
             <ChromePicker
               onChange={(e) => {
-                const lum1 = luminanceFromHex(e.hex);
-                const lum2 = luminanceFromHex("#ffffff");
+                const lum1 = luminanceFromHex(e.hex as CssColor) as number;
+                const lum2 = luminanceFromHex("#ffffff") as number;
                 const ratio = getRatioFromLum(lum1, lum2);
                 setContrast(ratio);
-                setActiveColor(e.hex);
+                setActiveColor(e.hex as CssColor);
               }}
               color={activeColor}
+              /* @ts-expect-error Chromepicker has a width, but its not included in its types */
               width={250}
             />
           </div>