@danske/sapphire-css 30.0.3 → 31.0.0

package/components/buttonGroup/buttonGroup.module.css

@@ -38,14 +38,18 @@ Added !important because of Angular implementation, and how the extra attribute
   flex-direction: column-reverse;
 }
 
-.sapphire-button-group--large {
+.sapphire-button-group--spacing-l {
   gap: var(--sapphire-button-group-size-spacing-l);
 }
 
-.sapphire-button-group--dense {
+.sapphire-button-group--spacing-s {
   gap: var(--sapphire-button-group-size-spacing-s);
 }
 
+.sapphire-button-group--spacing-xs {
+  gap: var(--sapphire-button-group-size-spacing-xs);
+}
+
 .sapphire-button-group--align-center {
   justify-content: center;
 }

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

@@ -3,8 +3,9 @@ declare const styles: {
   readonly "sapphire-button-group--stretch": string;
   readonly "sapphire-button-group--vertical": string;
   readonly "sapphire-button-group--stretch-auto-vertical": string;
-  readonly "sapphire-button-group--large": string;
-  readonly "sapphire-button-group--dense": string;
+  readonly "sapphire-button-group--spacing-l": string;
+  readonly "sapphire-button-group--spacing-s": string;
+  readonly "sapphire-button-group--spacing-xs": string;
   readonly "sapphire-button-group--align-center": string;
   readonly "sapphire-button-group--align-right": string;
   readonly "sapphire-button-group--align-left": string;

package/components/iconButton/iconButton.module.css

@@ -37,6 +37,11 @@
   border-width: 0;
   border-color: transparent;
 
+  /* typography */
+  font-family: var(--sapphire-icon-button-font-name);
+  font-weight: var(--sapphire-icon-button-font-weight);
+  font-size: var(--sapphire-icon-button-size-font-m);
+
   /* transition */
   /* we don't want to transition outline-offset */
   transition-property: opacity, background-color, color;
@@ -490,6 +495,7 @@ a.sapphire-icon-button {
   height: var(--sapphire-icon-button-size-height-l);
   width: var(--sapphire-icon-button-size-width-l);
   border-radius: var(--sapphire-icon-button-size-radius-l);
+  font-size: var(--sapphire-icon-button-size-font-l);
 }
 
 /**
@@ -499,6 +505,7 @@ a.sapphire-icon-button {
   height: var(--sapphire-icon-button-size-height-s);
   width: var(--sapphire-icon-button-size-width-s);
   border-radius: var(--sapphire-icon-button-size-radius-s);
+  font-size: var(--sapphire-icon-button-size-font-s);
 }
 
 /**
@@ -508,4 +515,5 @@ a.sapphire-icon-button {
   height: var(--sapphire-icon-button-size-height-xs);
   width: var(--sapphire-icon-button-size-width-xs);
   border-radius: var(--sapphire-icon-button-size-radius-xs);
+  font-size: var(--sapphire-icon-button-size-font-xs);
 }

package/components/pagination/pagination.module.css

@@ -6,7 +6,7 @@
     var(--sapphire-pagination-size-spacing-container-horizontal);
   background-color: var(--sapphire-pagination-color-background);
   font-family: var(--sapphire-pagination-font-name);
-  font-size: var(--sapphire-pagination-size-font);
+  font-size: var(--sapphire-pagination-size-font-page);
   height: var(--sapphire-pagination-size-height);
 
   /* The below is meant to address a font rendering quirk in OSX where the text
@@ -24,21 +24,31 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.sapphire-pagination-controls {
+.sapphire-pagination__controls {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   flex-grow: 1;
-}
-
-.sapphire-pagination-text {
-  font-weight: var(--sapphire-pagination-font-weight-numeric-text);
   color: var(--sapphire-pagination-color-text);
-  padding-right: var(--sapphire-pagination-size-spacing-controls-horizontal);
+  gap: var(--sapphire-pagination-size-spacing-controls-horizontal);
 }
 
-.sapphire-pagination-text-alphabetic {
+.sapphire-pagination__text {
   font-weight: var(--sapphire-pagination-font-weight-alphabetic-text);
   padding-left: var(--sapphire-pagination-size-spacing-text-horizontal);
   padding-right: var(--sapphire-pagination-size-spacing-text-horizontal);
 }
+
+.sapphire-pagination__text--emphasized {
+  font-weight: var(--sapphire-pagination-font-weight-numeric-text);
+}
+
+.sapphire-pagination__ellipsis {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--sapphire-pagination-size-ellipsis);
+  width: var(--sapphire-pagination-size-ellipsis);
+  font-size: var(--sapphire-pagination-size-font-ellipsis);
+  font-weight: var(--sapphire-pagination-font-weight-numeric-text);
+}

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

@@ -1,8 +1,9 @@
 declare const styles: {
   readonly "sapphire-pagination": string;
-  readonly "sapphire-pagination-controls": string;
-  readonly "sapphire-pagination-text": string;
-  readonly "sapphire-pagination-text-alphabetic": string;
+  readonly "sapphire-pagination__controls": string;
+  readonly "sapphire-pagination__text": string;
+  readonly "sapphire-pagination__text--emphasized": string;
+  readonly "sapphire-pagination__ellipsis": string;
 };
 export = styles;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "30.0.3",
+  "version": "31.0.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": "^38.1.0"
+    "@danske/sapphire-design-tokens": "^39.0.0"
   },
-  "gitHead": "dff768a601eaacae0e6847fbc1d3739f996f6ab2"
+  "gitHead": "ac09b3b908a8558628aaab2aabd701c18c3f5a11"
 }