@danske/sapphire-css 35.0.0 → 35.4.0

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

@@ -0,0 +1,4 @@
+import '@danske/sapphire-design-tokens/build/themes/realkredit/assets/fonts/realkredit/fontFace.css';
+import type { Theme } from '.';
+declare const theme: Theme;
+export default theme;

package/build/themes/cjs/realkredit.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+require("@danske/sapphire-design-tokens/build/themes/realkredit/assets/fonts/realkredit/fontFace.css");
+var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-tokens/build/themes/realkredit/css/tokens.module.css"));
+var theme = {
+    themeClassName: tokens_module_css_1["default"]['sapphire-theme-realkredit']
+};
+exports["default"] = theme;

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

@@ -0,0 +1,4 @@
+import '@danske/sapphire-design-tokens/build/themes/realkredit/assets/fonts/realkredit/fontFace.css';
+import type { Theme } from '.';
+declare const theme: Theme;
+export default theme;

package/build/themes/esm/realkredit.js

@@ -0,0 +1,6 @@
+import '@danske/sapphire-design-tokens/build/themes/realkredit/assets/fonts/realkredit/fontFace.css';
+import styles from '@danske/sapphire-design-tokens/build/themes/realkredit/css/tokens.module.css';
+var theme = {
+    themeClassName: styles['sapphire-theme-realkredit']
+};
+export default theme;

package/components/calendar/calendar.module.css

@@ -5,11 +5,15 @@
   box-sizing: border-box;
 }
 .sapphire-calendar__table-container {
+  --sapphire-calendar-cell-size: var(--sapphire-global-size-generic-120);
+  --sapphire-calendar-control-size: var(
+    --sapphire-semantic-size-height-control-lg
+  );
   /*
   min-width needed for months and years view. Otherwise the calendar's width changes as view is
   switched
   */
-  min-width: calc(7 * var(--sapphire-global-size-generic-120));
+  min-width: calc(7 * var(--sapphire-calendar-cell-size));
   /*
   For now we have decided to not support flexible width for the calendar grid.
   If we want that, we only need to add a `flex: 1` here. The width of Months/Years table is
@@ -17,6 +21,13 @@
   */
 }
 
+.sapphire-calendar__table-container--md {
+  --sapphire-calendar-cell-size: var(--sapphire-global-size-generic-100);
+  --sapphire-calendar-control-size: var(
+    --sapphire-semantic-size-height-control-md
+  );
+}
+
 .sapphire-calendar__header {
   display: flex;
   align-items: center;
@@ -48,7 +59,7 @@
 }
 
 .sapphire-calendar__table--month-year {
-  width: calc(7 * var(--sapphire-global-size-generic-120));
+  width: calc(7 * var(--sapphire-calendar-cell-size));
   table-layout: fixed;
 }
 
@@ -81,7 +92,7 @@
 }
 
 .sapphire-calendar__table-body-cell {
-  height: var(--sapphire-semantic-size-height-control-lg);
+  height: var(--sapphire-calendar-control-size);
   text-align: center;
   padding: 0;
 }
@@ -111,13 +122,13 @@
   color: var(--sapphire-semantic-color-content-default-secondary);
   font-weight: var(--sapphire-semantic-font-weight-default-semibold);
   font-size: var(--sapphire-semantic-size-font-text-md);
-  width: var(--sapphire-global-size-generic-120);
+  width: var(--sapphire-calendar-cell-size);
 }
 
 .sapphire-calendar__button {
   all: unset;
   display: flex;
-  height: var(--sapphire-semantic-size-height-control-lg);
+  height: var(--sapphire-calendar-control-size);
   align-items: center;
   justify-content: center;
   cursor: pointer;
@@ -156,11 +167,11 @@
 /* Customizations for day buttons */
 .sapphire-calendar__button--day .sapphire-calendar__button-text {
   width: calc(
-    var(--sapphire-global-size-generic-120) - 2 *
+    var(--sapphire-calendar-cell-size) - 2 *
       var(--sapphire-semantic-size-focus-ring)
   );
   height: calc(
-    var(--sapphire-global-size-generic-120) - 2 *
+    var(--sapphire-calendar-cell-size) - 2 *
       var(--sapphire-semantic-size-focus-ring)
   );
   padding: 0;
@@ -409,6 +420,11 @@
   bottom: var(--sapphire-global-size-generic-20);
 }
 
+.sapphire-calendar__table-container--md
+  .sapphire-calendar__button.sapphire-calendar__button--current::after {
+  bottom: var(--sapphire-global-size-generic-10);
+}
+
 .sapphire-calendar__button.sapphire-calendar__button--selected:not(
     .sapphire-calendar__button--range-selection
   ).sapphire-calendar__button--current::after,

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

@@ -1,6 +1,7 @@
 declare const styles: {
   readonly "sapphire-calendar": string;
   readonly "sapphire-calendar__table-container": string;
+  readonly "sapphire-calendar__table-container--md": string;
   readonly "sapphire-calendar__header": string;
   readonly "sapphire-calendar__header--left": string;
   readonly "sapphire-calendar__header-next-month": string;

package/components/contextualHelp/contextualHelp.module.css

@@ -1,6 +1,3 @@
-/**
-* TODO(v2): rename to help-button
-*/
 .sapphire-contextual-help {
   color: var(--sapphire-semantic-color-content-default-primary);
   line-height: var(--sapphire-global-size-line-height-sm);

package/components/iconButton/iconButton.module.css

@@ -412,3 +412,81 @@ a.sapphire-icon-button {
   border-radius: var(--sapphire-semantic-size-height-control-xs);
   font-size: var(--sapphire-semantic-size-font-control-sm);
 }
+
+/**
+ * Toggle Icon  Button
+ */
+
+/* Selected */
+.sapphire-icon-button--selected {
+  background-color: var(
+    --sapphire-semantic-color-background-selection-selected-default
+  );
+  color: var(--sapphire-semantic-color-content-selection-selected-default);
+}
+
+.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active):hover,
+.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active).is-hover {
+  background-color: var(
+    --sapphire-semantic-color-background-selection-selected-hover
+  );
+}
+
+.sapphire-icon-button--selected.is-focus,
+.sapphire-icon-button--selected:not(.js-focus):focus-visible {
+  background-color: var(
+    --sapphire-semantic-color-background-selection-selected-default
+  );
+}
+
+.sapphire-icon-button--selected:not(:disabled):not(.is-disabled).is-active,
+.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):active,
+.sapphire-icon-button--selected:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
+  background-color: var(
+    --sapphire-semantic-color-background-selection-selected-active
+  );
+  color: var(--sapphire-semantic-color-content-selection-selected-active);
+}
+
+/* Unselected */
+.sapphire-icon-button--unselected {
+  background-color: var(
+    --sapphire-semantic-color-background-selection-unselected-default
+  );
+  color: var(--sapphire-semantic-color-content-selection-unselected-default);
+}
+
+.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active):hover,
+.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active).is-hover {
+  background-color: var(
+    --sapphire-semantic-color-background-selection-unselected-hover
+  );
+}
+
+.sapphire-icon-button--unselected.is-focus,
+.sapphire-icon-button--unselected:not(.js-focus):focus-visible {
+  background-color: var(
+    --sapphire-semantic-color-background-selection-unselected-default
+  );
+}
+
+.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled).is-active,
+.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):active,
+.sapphire-icon-button--unselected:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
+  background-color: var(
+    --sapphire-semantic-color-background-selection-unselected-active
+  );
+  color: var(--sapphire-semantic-color-content-selection-unselected-active);
+}

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

@@ -19,6 +19,8 @@ declare const styles: {
   readonly "sapphire-icon-button--lg": string;
   readonly "sapphire-icon-button--sm": string;
   readonly "sapphire-icon-button--xs": string;
+  readonly "sapphire-icon-button--selected": string;
+  readonly "sapphire-icon-button--unselected": string;
 };
 export = styles;
 

package/components/searchField/searchField.module.css

@@ -38,7 +38,7 @@
   height: 100%;
   min-width: 0;
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
-  caret-color: var(--sapphire-semantic-color-background-action-primary-default);
+  caret-color: var(--sapphire-semantic-color-cursor-default);
   position: relative;
   padding-left: var(--sapphire-semantic-size-height-input-lg);
 }

package/components/segmentedControl/segmentedControl.module.css

@@ -24,7 +24,9 @@
   display: inline-flex;
   position: relative;
   height: 100%;
-  background-color: var(--sapphire-global-color-sapphire-50);
+  background-color: var(
+    --sapphire-semantic-color-background-control-special-secondary-default
+  );
   border-radius: var(--sapphire-semantic-size-height-control-lg);
   padding: var(--sapphire-global-size-static-5);
   box-sizing: border-box;
@@ -36,7 +38,9 @@
   left: 0;
   height: calc(100% - var(--sapphire-global-size-static-5) * 2);
   display: block;
-  background-color: var(--sapphire-semantic-color-background-surface);
+  background-color: var(
+    --sapphire-semantic-color-background-control-special-primary-default
+  );
   box-shadow: var(--sapphire-global-shadow-sm);
   box-sizing: border-box;
   z-index: 1;

package/components/skeleton/skeleton.module.css

@@ -15,7 +15,7 @@
 .sapphire-skeleton {
   width: 100%;
 
-  background-color: var(--sapphire-global-color-sapphire-100);
+  background-color: var(--sapphire-semantic-color-background-skeleton-default);
 
   animation: skeletonPulse infinite cubic-bezier(0.25, 0, 0.25, 1);
   animation-duration: var(--sapphire-semantic-time-fade-slow);

package/components/spinner/spinner.module.css

@@ -22,11 +22,11 @@
 }
 
 .sapphire-spinner__track {
-  fill: var(--sapphire-semantic-color-content-default-primary);
+  fill: var(--sapphire-semantic-color-background-spinner-primary-default);
 }
 
 .sapphire-spinner__accent {
-  fill: var(--sapphire-semantic-color-background-action-primary-default);
+  fill: var(--sapphire-semantic-color-background-spinner-secondary-default);
 }
 
 .sapphire-spinner--inherit .sapphire-spinner__track {

package/components/table/table.module.css

@@ -16,6 +16,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  background-color: var(--sapphire-semantic-color-background-surface);
 }
 
 .sapphire-table--overflow {
@@ -28,7 +29,6 @@
 .sapphire-table__table {
   border-collapse: collapse;
   border-spacing: 0;
-  background-color: var(--sapphire-semantic-color-background-surface);
   width: 100%;
 }
 
@@ -72,6 +72,19 @@
   text-align: end;
 }
 
+/* We added these to accommodate alignment in cells using flex */
+.sapphire-table__cell-wrapper .sapphire-table__cell--alignLeft {
+  justify-content: flex-start;
+}
+
+.sapphire-table__cell-wrapper .sapphire-table__cell--alignCenter {
+  justify-content: center;
+}
+
+.sapphire-table__cell-wrapper .sapphire-table__cell--alignRight {
+  justify-content: flex-end;
+}
+
 .sapphire-table__headCell {
   color: var(--sapphire-semantic-color-content-default-primary);
   box-sizing: border-box;
@@ -83,8 +96,7 @@
 }
 
 .sapphire-table__headCell_container {
-  padding: var(--sapphire-semantic-size-spacing-20)
-    var(--sapphire-semantic-size-spacing-30);
+  padding: var(--sapphire-semantic-size-spacing-20);
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
@@ -189,46 +201,118 @@
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
 }
 
+.sapphire-table__cell-contents {
+  display: block;
+  width: 100%;
+}
+
 /* Overflow behaviour */
 .sapphire-table__cell--ellipsed,
-.sapphire-table__headCell_content--ellipsed {
+.sapphire-table__headCell_content--ellipsed,
+.sapphire-table__cell--ellipsed .sapphire-table__cell-contents {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+/* Cell spacing SM */
+.sapphire-table__table--spacing-sm .sapphire-table__cell,
+.sapphire-table__table--spacing-sm
+  .sapphire-table__selectionCell:not(:first-child) {
+  padding-top: var(--sapphire-semantic-size-spacing-20);
+  padding-bottom: var(--sapphire-semantic-size-spacing-20);
+}
+
+/* Cell spacing LG */
+.sapphire-table__table--spacing-lg .sapphire-table__cell,
+.sapphire-table__table--spacing-lg
+  .sapphire-table__selectionCell:not(:first-child) {
+  padding-top: var(--sapphire-semantic-size-spacing-40);
+  padding-bottom: var(--sapphire-semantic-size-spacing-40);
+}
+
+/* Cell spacing XL */
+.sapphire-table__table--spacing-xl .sapphire-table__cell,
+.sapphire-table__table--spacing-xl
+  .sapphire-table__selectionCell:not(:first-child) {
+  padding-top: var(--sapphire-global-size-generic-50);
+  padding-bottom: var(--sapphire-global-size-generic-50);
+}
+
+/* Cell spacing MD (default) */
 .sapphire-table__cell,
 .sapphire-table__selectionCell {
   font-size: var(--sapphire-semantic-size-font-text-lg);
   line-height: var(--sapphire-semantic-size-line-height-md);
   padding: var(--sapphire-semantic-size-spacing-30)
-    var(--sapphire-semantic-size-spacing-30);
+    var(--sapphire-semantic-size-spacing-20);
 }
 
-/* Selection cells that are suppose to contain only a checkbox */
+/* Selection cells that are supposes to contain only a checkbox */
 .sapphire-table__selectionCell {
   line-height: 0;
-  padding-left: var(--sapphire-semantic-size-spacing-50);
   width: var(--sapphire-global-size-generic-50);
 }
 
-.sapphire-table__selectionCell:not(:first-child) {
-  padding-left: var(--sapphire-semantic-size-spacing-30);
+.sapphire-table__cell-wrapper .sapphire-table__selectionCell {
+  width: unset;
+  min-width: var(--sapphire-global-size-generic-50);
 }
 
-.sapphire-table__cell:first-child {
+.sapphire-table__cell:first-child,
+.sapphire-table__selectionCell:first-child,
+.sapphire-table__cell-wrapper:first-child > .sapphire-table__cell,
+.sapphire-table__cell-wrapper:first-child > .sapphire-table__selectionCell {
   padding-left: var(--sapphire-semantic-size-spacing-50);
 }
-.sapphire-table__cell:last-child {
+.sapphire-table__cell:last-child,
+.sapphire-table__cell-wrapper:last-child > .sapphire-table__cell {
   padding-right: var(--sapphire-semantic-size-spacing-50);
 }
-.sapphire-table__headCell:first-child {
-  padding-left: var(--sapphire-semantic-size-spacing-30);
+.sapphire-table__headCell:first-child,
+.sapphire-table__cell-wrapper:first-child .sapphire-table__headCell {
+  padding-left: var(--sapphire-semantic-size-spacing-40);
 }
-.sapphire-table__headCell:last-child {
+
+.sapphire-table__selectionCell:first-child,
+.sapphire-table__cell-wrapper:first-child > .sapphire-table__selectionCell {
   padding-right: var(--sapphire-semantic-size-spacing-30);
 }
 
+.sapphire-table__headCell:last-child,
+.sapphire-table__cell-wrapper:last-child > .sapphire-table__headCell {
+  padding-right: var(--sapphire-semantic-size-spacing-40);
+}
+
+.sapphire-table__tfoot .sapphire-table__cell {
+  font-weight: var(--sapphire-semantic-font-weight-default-bold);
+}
+
+.sapphire-table__cell-wrapper > .sapphire-table__cell,
+.sapphire-table__cell-wrapper > .sapphire-table__selectionCell {
+  padding-left: var(--sapphire-semantic-size-spacing-20);
+  padding-right: var(--sapphire-semantic-size-spacing-20);
+}
+
+.sapphire-table__head .sapphire-table__selectionCell {
+  padding-top: var(--sapphire-semantic-size-spacing-20);
+  padding-bottom: var(--sapphire-semantic-size-spacing-20);
+}
+
+.sapphire-table__cell-wrapper .sapphire-table__headCell {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.sapphire-table__cell-wrapper .sapphire-table__cell,
+.sapphire-table__cell-wrapper .sapphire-table__headCell,
+.sapphire-table__cell-wrapper .sapphire-table__selectionCell {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  box-sizing: border-box;
+}
+
 .sapphire-table__row {
   position: relative;
   border-bottom: var(--sapphire-semantic-size-border-sm) solid
@@ -313,6 +397,14 @@ and to avoid the complications of merging the two shadows */ {
     var(--sapphire-semantic-color-background-informative-primary-default);
 }
 
+.sapphire-table__tfoot {
+  position: relative;
+  z-index: 2;
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-default
+  );
+}
+
 /**
  * Selection actions. Optionally shown when a table uses multiple selection.
  */
@@ -342,3 +434,15 @@ and to avoid the complications of merging the two shadows */ {
   bottom: 0;
   left: 0;
 }
+
+/**
+ * Virtualized footer.
+ * Used when the table is virtualized and the (non-sticky) footer is present inside the scroll view.
+ */
+.sapphire-table__footer--virtualized {
+  position: absolute;
+  z-index: 2;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}

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

@@ -9,6 +9,7 @@ declare const styles: {
   readonly "sapphire-table__cell--alignLeft": string;
   readonly "sapphire-table__cell--alignCenter": string;
   readonly "sapphire-table__cell--alignRight": string;
+  readonly "sapphire-table__cell-wrapper": string;
   readonly "sapphire-table__headCell": string;
   readonly "sapphire-table__headCell_container": string;
   readonly "sapphire-table__row": string;
@@ -23,8 +24,13 @@ declare const styles: {
   readonly "sapphire-table__headCell__text": string;
   readonly "sapphire-table__headCell__icon": string;
   readonly "sapphire-table__body": string;
+  readonly "sapphire-table__cell-contents": string;
   readonly "sapphire-table__cell--ellipsed": string;
   readonly "sapphire-table__headCell_content--ellipsed": string;
+  readonly "sapphire-table__table--spacing-sm": string;
+  readonly "sapphire-table__table--spacing-lg": string;
+  readonly "sapphire-table__table--spacing-xl": string;
+  readonly "sapphire-table__tfoot": string;
   readonly "sapphire-table__row--active": string;
   readonly "sapphire-table__row--selected": string;
   readonly "sapphire-table__row--expanded": string;
@@ -37,6 +43,7 @@ declare const styles: {
   readonly "sapphire-table__selection-action-bar": string;
   readonly "sapphire-table__footer": string;
   readonly "sapphire-table__footer--sticky": string;
+  readonly "sapphire-table__footer--virtualized": string;
 };
 export = styles;
 

package/components/textField/textField.module.css

@@ -46,7 +46,7 @@
   font-size: inherit;
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
 
-  caret-color: var(--sapphire-semantic-color-background-action-primary-default);
+  caret-color: var(--sapphire-semantic-color-cursor-default);
   color: inherit;
 
   background-color: transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "35.0.0",
+  "version": "35.4.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -66,7 +66,7 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^41.2.0"
+    "@danske/sapphire-design-tokens": "^41.3.0"
   },
-  "gitHead": "48ef1e292c3525b32559a8450dbd22b1df5e55db"
+  "gitHead": "5289085e86eb94dc62d1e843364fbbd8f0c1903f"
 }

package/themes/realkredit.d.ts

@@ -0,0 +1,4 @@
+import '@danske/sapphire-design-tokens/build/themes/realkredit/assets/fonts/realkredit/fontFace.css';
+import type { Theme } from '.';
+declare const theme: Theme;
+export default theme;

package/themes/realkredit.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+require("@danske/sapphire-design-tokens/build/themes/realkredit/assets/fonts/realkredit/fontFace.css");
+var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-tokens/build/themes/realkredit/css/tokens.module.css"));
+var theme = {
+    themeClassName: tokens_module_css_1["default"]['sapphire-theme-realkredit']
+};
+exports["default"] = theme;

package/themes/realkredit.tokens.scss

@@ -0,0 +1 @@
+@use '@danske/sapphire-design-tokens/build/themes/realkredit/css/tokens.css';