@danske/sapphire-css 26.1.0 → 26.2.0

package/build/themes/cjs/index.d.ts

@@ -1,5 +1,5 @@
 export { default as tokens } from '@danske/sapphire-design-tokens/build/themes';
-export declare type Theme = {
+export interface Theme {
     themeClassName: string;
     contrastThemeClassName: string;
-};
+}

package/build/themes/esm/index.d.ts

@@ -1,5 +1,5 @@
 export { default as tokens } from '@danske/sapphire-design-tokens/build/themes';
-export declare type Theme = {
+export interface Theme {
     themeClassName: string;
     contrastThemeClassName: string;
-};
+}

package/components/backdrop/backdrop.module.css

@@ -1,8 +1,36 @@
+@keyframes fade-in {
+  from {
+    background-color: transparent;
+  }
+
+  to {
+    background-color: var(--sapphire-backdrop-color-background);
+  }
+}
+
+@keyframes fade-out {
+  from {
+    background-color: var(--sapphire-backdrop-color-background);
+  }
+
+  to {
+    background-color: transparent;
+  }
+}
+
 .sapphire-backdrop {
   width: 100%;
   height: 100%;
-  background-color: var(--sapphire-backdrop-color-background);
   display: flex;
   justify-content: center;
   align-items: center;
+
+  animation-name: fade-in;
+  animation-duration: var(--sapphire-backdrop-time-transition);
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+}
+
+.sapphire-backdrop--exiting {
+  animation-name: fade-out;
 }

package/components/backdrop/backdrop.module.css.d.ts

@@ -1,5 +1,8 @@
 declare const styles: {
   readonly "sapphire-backdrop": string;
+  readonly "fade-in": string;
+  readonly "sapphire-backdrop--exiting": string;
+  readonly "fade-out": string;
 };
 export = styles;
 

package/components/button/button.module.css

@@ -592,6 +592,12 @@ a.sapphire-button {
   font-size: var(--sapphire-button-size-font-l);
   border-radius: var(--sapphire-button-size-radius-l);
 }
+.sapphire-button--large.sapphire-button--secondary-text,
+.sapphire-button--large.sapphire-button--tertiary-text,
+.sapphire-button--large.sapphire-button--danger-text {
+  padding: 0;
+  border-radius: var(--sapphire-button-size-radius-text);
+}
 
 /**
  * SMALL
@@ -603,3 +609,9 @@ a.sapphire-button {
   font-size: var(--sapphire-button-size-font-s);
   border-radius: var(--sapphire-button-size-radius-s);
 }
+.sapphire-button--small.sapphire-button--secondary-text,
+.sapphire-button--small.sapphire-button--tertiary-text,
+.sapphire-button--small.sapphire-button--danger-text {
+  padding: 0;
+  border-radius: var(--sapphire-button-size-radius-text);
+}

package/components/dialog/dialog.module.css

@@ -1,3 +1,23 @@
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 .sapphire-dialog {
   border-radius: var(--sapphire-dialog-size-radius);
   background-color: var(--sapphire-dialog-color-background);
@@ -12,6 +32,15 @@
   /* if implemented as focusable, we don't want the outline because this is not
    * an an interactive element in itself */
   outline: none;
+
+  animation-name: fade-in;
+  animation-duration: var(--sapphire-dialog-time-transition);
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+}
+
+.sapphire-dialog--exiting {
+  animation-name: fade-out;
 }
 
 .sapphire-dialog--small {

package/components/dialog/dialog.module.css.d.ts

@@ -1,5 +1,8 @@
 declare const styles: {
   readonly "sapphire-dialog": string;
+  readonly "fade-in": string;
+  readonly "sapphire-dialog--exiting": string;
+  readonly "fade-out": string;
   readonly "sapphire-dialog--small": string;
   readonly "sapphire-dialog--medium": string;
   readonly "sapphire-dialog--large": string;

package/components/table/table.module.css

@@ -12,6 +12,10 @@
    */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .sapphire-table--overflow {
@@ -24,7 +28,6 @@
 .sapphire-table__table {
   border-collapse: collapse;
   border-spacing: 0;
-  height: inherit;
   background-color: var(--sapphire-table-color-background-table);
   width: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "26.1.0",
+  "version": "26.2.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -46,7 +46,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@danske/sapphire-icons": "^2.0.0",
-    "@danske/sapphire-react": "3.0.0",
+    "@danske/sapphire-react": "3.17.0",
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-links": "^6.5.13",
     "@storybook/addons": "^6.5.13",
@@ -66,7 +66,7 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^35.4.0"
+    "@danske/sapphire-design-tokens": "^35.5.0"
   },
-  "gitHead": "0feb42a3480197d23d973f6c844f0c302d2bc99e"
+  "gitHead": "d760160d715ac5516586f3256f47909f8e74aa46"
 }

package/themes/index.d.ts

@@ -1,5 +1,5 @@
 export { default as tokens } from '@danske/sapphire-design-tokens/build/themes';
-export declare type Theme = {
+export interface Theme {
     themeClassName: string;
     contrastThemeClassName: string;
-};
+}