@danske/sapphire-css 32.0.1 → 32.1.1

package/components/toast/toast.module.css

@@ -38,34 +38,40 @@
   bottom: 0;
   left: 50%;
 }
+
 .sapphire-toast-container--bottom-left {
   --sapphire-toast-horizontal-transform: 0%;
   bottom: 0;
   left: 0;
 }
+
 .sapphire-toast-container--bottom-right {
   --sapphire-toast-horizontal-transform: 0%;
   bottom: 0;
   right: 0;
 }
+
 .sapphire-toast-container--top {
   --sapphire-toast-animation-direction: -1;
   --sapphire-toast-horizontal-transform: -50%;
   top: 0;
   left: 50%;
 }
+
 .sapphire-toast-container--top-left {
   --sapphire-toast-animation-direction: -1;
   --sapphire-toast-horizontal-transform: 0%;
   top: 0;
   left: 0;
 }
+
 .sapphire-toast-container--top-right {
   --sapphire-toast-animation-direction: -1;
   --sapphire-toast-horizontal-transform: 0%;
   top: 0;
   right: 0;
 }
+
 /************************************************************/
 
 .sapphire-toast {
@@ -82,27 +88,27 @@
   max-width: var(--sapphire-toast-size-width-max);
   min-width: var(--sapphire-toast-size-width-min);
   box-shadow: var(--sapphire-toast-shadow);
-  border-radius: var(--sapphire-toast-size-radius);
+  border-radius: var(--sapphire-semantic-size-radius-popover);
   animation-duration: var(--sapphire-toast-time-transition);
 
   /* Ease-out Cubic */
   animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
 
   /* if implemented as focusable, we don't want the outline because this is not
-   * an an interactive element in itself */
+     * an an interactive element in itself */
   outline: none;
 
   /* The below is meant to address a font rendering quirk in OSX where the text
-   * looks bolder than intended due to subpixel rendering. This quirk generally
-   * occurs for bold fonts on dark backgrounds but depending on the font, it
-   * can happen in other contexts as well.
-   *
-   * These do not do anything except in webkit browsers & firefox on OSX.
-   *
-   * For more details see:
-   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
-   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
-   */
+     * looks bolder than intended due to subpixel rendering. This quirk generally
+     * occurs for bold fonts on dark backgrounds but depending on the font, it
+     * can happen in other contexts as well.
+     *
+     * These do not do anything except in webkit browsers & firefox on OSX.
+     *
+     * For more details see:
+     * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+     * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
+     */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -127,12 +133,14 @@
 
 .sapphire-toast__content {
   display: flex;
-  gap: var(--sapphire-toast-size-spacing-horizontal);
+  gap: var(--sapphire-semantic-size-spacing-20);
   align-items: center;
   justify-content: space-between;
 
-  background-color: var(--sapphire-toast-color-background);
-  color: var(--sapphire-toast-color-content);
+  background-color: var(
+    --sapphire-semantic-color-background-surface-primary-default
+  );
+  color: var(--sapphire-semantic-color-content-default-primary);
   font-family: var(--sapphire-toast-font-name);
   font-size: var(--sapphire-toast-size-font);
   font-weight: var(--sapphire-toast-font-weight);
@@ -141,3 +149,145 @@
     var(--sapphire-toast-size-spacing-horizontal);
   padding-right: var(--sapphire-toast-size-spacing-end);
 }
+
+.sapphire-toast__content--success {
+  background-color: var(
+    --sapphire-semantic-color-background-positive-primary-default
+  );
+}
+
+.sapphire-toast__title--with-icon {
+  flex: 1;
+}
+
+/**
+ * Close Button
+ *
+ * This is a special button, not matching any of our existing buttons or icon
+ * buttons and these are only meant to be used in the toast component.
+ */
+
+.sapphire-toast__close-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  /* In Safari buttons get a 2px border
+     * https://github.com/necolas/normalize.css/blob/master/normalize.css#L160-L169
+     */
+  margin: 0;
+  padding: 0;
+
+  /* The below is meant to address a font rendering quirk in OSX where the text
+     * looks bolder than intended due to subpixel rendering. This quirk generally
+     * occurs for bold fonts on dark backgrounds but depending on the font, it
+     * can happen in other contexts as well.
+     *
+     * These do not do anything except in webkit browsers & firefox on OSX.
+     *
+     * For more details see:
+     * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+     * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
+     */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* sizing */
+  height: var(--sapphire-semantic-size-height-control-s);
+  width: var(--sapphire-semantic-size-height-control-s);
+  flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */
+
+  /* shape */
+  border-radius: var(--sapphire-semantic-size-height-control-s);
+  border-style: solid;
+  border-width: 0;
+  border-color: transparent;
+
+  /* transition */
+  /* we don't want to transition outline-offset */
+  transition-property: opacity, background-color, color;
+  animation-duration: var(--sapphire-semantic-time-motion-default);
+  transition-timing-function: ease-in-out;
+  cursor: pointer;
+
+  background-color: var(
+    --sapphire-semantic-color-background-action-tertiary-ghost-default
+  );
+  color: var(--sapphire-semantic-color-content-action-tertiary-default);
+}
+
+/**
+ * Hover (button)
+ */
+.sapphire-toast__close-button:not(:disabled):not(:active):not(.is-active):not(
+    .js-hover
+  ):hover,
+.sapphire-toast__close-button:not(:disabled):not(:active):not(
+    .is-active
+  ).is-hover {
+  background-color: var(
+    --sapphire-semantic-color-background-action-tertiary-ghost-hover
+  );
+  color: var(--sapphire-semantic-color-content-action-tertiary-default);
+}
+
+/**
+ * Focus (button)
+ */
+.sapphire-toast__close-button:focus {
+  outline: none;
+}
+
+.sapphire-toast__close-button.is-focus,
+.sapphire-toast__close-button:not(.js-focus):focus-visible {
+  background-color: var(
+    --sapphire-semantic-color-background-action-tertiary-ghost-default
+  );
+}
+
+/**
+ * Active (button)
+ */
+.sapphire-toast__close-button:not(:disabled).is-active,
+.sapphire-toast__close-button:not(:disabled):active,
+.sapphire-toast__close-button:not(:disabled):focus-visible:active {
+  background-color: var(
+    --sapphire-semantic-color-background-action-tertiary-ghost-active
+  );
+  color: var(--sapphire-semantic-color-content-action-tertiary-active);
+}
+
+/**
+* Success styles
+ */
+
+/**
+ * Hover (button)
+ */
+.sapphire-toast__content--success
+  .sapphire-toast__close-button:not(:disabled):not(:active):not(.is-active):not(
+    .js-hover
+  ):hover,
+.sapphire-toast__content--success
+  .sapphire-toast__close-button:not(:disabled):not(:active):not(
+    .is-active
+  ).is-hover {
+  background-color: var(--sapphire-global-color-green-400);
+  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
+}
+
+/**
+ * Active (button)
+ */
+.sapphire-toast__content--success
+  .sapphire-toast__close-button:not(:disabled).is-active,
+.sapphire-toast__content--success
+  .sapphire-toast__close-button:not(:disabled):active,
+.sapphire-toast__content--success
+  .sapphire-toast__close-button:not(:disabled):focus-visible:active {
+  background-color: var(--sapphire-global-color-green-300);
+  color: var(--sapphire-semantic-color-content-action-tertiary-active);
+}

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

@@ -13,6 +13,14 @@ declare const styles: {
   readonly "sapphire-toast--exiting": string;
   readonly "fade-out": string;
   readonly "sapphire-toast__content": string;
+  readonly "sapphire-toast__content--success": string;
+  readonly "sapphire-toast__title--with-icon": string;
+  readonly "sapphire-toast__close-button": string;
+  readonly "is-active": string;
+  readonly "js-hover": string;
+  readonly "is-hover": string;
+  readonly "is-focus": string;
+  readonly "js-focus": string;
 };
 export = styles;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "32.0.1",
+  "version": "32.1.1",
   "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": "^39.2.0"
+    "@danske/sapphire-design-tokens": "^40.0.1"
   },
-  "gitHead": "c2e5f992f32bde413226a47b332b3949794cff51"
+  "gitHead": "96f9ae692dc2cdc75d36dd92943cdf70a2b39b4c"
 }