@danske/sapphire-css 16.3.0 → 26.1.3

package/components/textField/textField.module.css

@@ -1,9 +1,17 @@
 .sapphire-text-field {
-  display: inline-flex;
-  flex-direction: column;
-  font-family: var(--sapphire-text-field-font-name);
   width: var(--sapphire-text-field-size-width-control);
-
+  box-shadow: inset 0px 0px 0px var(--sapphire-text-field-size-width-border)
+    var(--sapphire-text-field-color-border-default);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  border-radius: var(--sapphire-text-field-size-radius);
+  cursor: text;
+  color: var(--sapphire-text-field-color-content);
+  background-color: var(--sapphire-text-field-color-background);
+  height: var(--sapphire-text-field-size-height-field-l);
+  font-family: var(--sapphire-text-field-font-name);
+  font-size: var(--sapphire-text-field-size-font-content-l);
   /* 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
@@ -17,37 +25,11 @@
    */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  box-sizing: border-box;
-}
-
-.sapphire-text-field__label-container {
-  display: flex;
-  align-items: center;
-  gap: var(--sapphire-text-field-size-spacing-label-horizontal);
-  min-height: var(--sapphire-text-field-size-height-label);
-  margin-bottom: var(--sapphire-text-field-size-spacing-label-vertical);
-}
-
-.sapphire-text-field__label-text {
-  font-size: var(--sapphire-text-field-size-font-label);
-  font-weight: var(--sapphire-text-field-size-font-weight-label);
-  line-height: var(--sapphire-text-field-size-line-height-label);
-  color: var(--sapphire-text-field-color-label);
 }
 
-.sapphire-text-field__input-container {
-  box-shadow: inset 0px 0px 0px var(--sapphire-text-field-size-width-border)
-    var(--sapphire-text-field-color-border-default);
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  border-radius: var(--sapphire-text-field-size-radius);
-  cursor: text;
-  color: var(--sapphire-text-field-color-content);
-  font-size: var(--sapphire-text-field-size-font-content);
-  height: var(--sapphire-text-field-size-height-field);
-  background-color: var(--sapphire-text-field-color-background);
+.sapphire-text-field--medium {
+  height: var(--sapphire-text-field-size-height-field-m);
+  font-size: var(--sapphire-text-field-size-font-content-m);
 }
 
 .sapphire-text-field__input {
@@ -55,7 +37,7 @@
   width: 100%;
   height: 100%;
   margin: 0;
-  padding: 0 var(--sapphire-text-field-size-spacing-control-horizontal);
+  padding: 0 var(--sapphire-text-field-size-spacing-control-horizontal-l);
   line-height: var(--sapphire-text-field-size-line-height-content);
 
   font-family: inherit;
@@ -70,6 +52,10 @@
   outline: none;
 }
 
+.sapphire-text-field--medium .sapphire-text-field__input {
+  padding: 0 var(--sapphire-text-field-size-spacing-control-horizontal-m);
+}
+
 /**
  * Placeholder
  */
@@ -78,12 +64,18 @@
   color: var(--sapphire-text-field-color-placeholder);
 }
 
+/** 
+ * Input text alignment
+ */
+.sapphire-text-field__input--align-right {
+  text-align: right;
+}
+
 /**
  * Single line
  * (this supports a prefix/postfix)
  */
-.sapphire-text-field:not(.sapphire-text-field--multiline)
-  .sapphire-text-field__input-container {
+.sapphire-text-field:not(.sapphire-text-field--multiline) {
   gap: var(--sapphire-text-field-size-spacing-control-gap);
 }
 
@@ -93,23 +85,37 @@
 
 .sapphire-text-field .sapphire-text-field__affix {
   color: var(--sapphire-text-field-color-affix);
+  flex-shrink: 0;
 }
 
 .sapphire-text-field .sapphire-text-field__affix--icon {
-  width: var(--sapphire-text-field-size-affix-icon-width);
-  height: var(--sapphire-text-field-size-affix-icon-height);
+  width: var(--sapphire-text-field-size-affix-icon-width-l);
+  height: var(--sapphire-text-field-size-affix-icon-height-l);
+}
+
+.sapphire-text-field--medium .sapphire-text-field__affix--icon {
+  width: var(--sapphire-text-field-size-affix-icon-width-m);
+  height: var(--sapphire-text-field-size-affix-icon-height-m);
 }
 
-.sapphire-text-field--with-prefix .sapphire-text-field__input-container {
-  padding-left: var(--sapphire-text-field-size-spacing-control-horizontal);
+.sapphire-text-field--with-prefix {
+  padding-left: var(--sapphire-text-field-size-spacing-control-horizontal-l);
+}
+
+.sapphire-text-field--medium .sapphire-text-field--with-prefix {
+  padding-left: var(--sapphire-text-field-size-spacing-control-horizontal-m);
 }
 
 .sapphire-text-field--with-prefix .sapphire-text-field__input {
   padding-left: 0;
 }
 
-.sapphire-text-field--with-postfix .sapphire-text-field__input-container {
-  padding-right: var(--sapphire-text-field-size-spacing-control-horizontal);
+.sapphire-text-field--with-postfix {
+  padding-right: var(--sapphire-text-field-size-spacing-control-horizontal-l);
+}
+
+.sapphire-text-field--medium .sapphire-text-field--with-postfix {
+  padding-right: var(--sapphire-text-field-size-spacing-control-horizontal-m);
 }
 
 .sapphire-text-field--with-postfix .sapphire-text-field__input {
@@ -120,9 +126,8 @@
  * Multiline
  * (this does not support a prefix/postfix)
  */
-.sapphire-text-field--multiline .sapphire-text-field__input-container {
+.sapphire-text-field--multiline {
   display: inline-block;
-  width: 100%;
   line-height: 0;
   height: unset;
   padding: 0;
@@ -131,10 +136,20 @@
 .sapphire-text-field--multiline .sapphire-text-field__input {
   resize: none;
   width: 100%;
-  padding: var(--sapphire-text-field-size-spacing-control-vertical)
-    var(--sapphire-text-field-size-spacing-control-horizontal);
+  padding: var(--sapphire-text-field-size-spacing-control-vertical-l)
+    var(--sapphire-text-field-size-spacing-control-horizontal-l);
+  scroll-padding-bottom: var(
+    --sapphire-text-field-size-spacing-control-vertical-l
+  );
+}
+
+.sapphire-text-field--medium
+  .sapphire-text-field--multiline
+  .sapphire-text-field__input {
+  padding: var(--sapphire-text-field-size-spacing-control-vertical-m)
+    var(--sapphire-text-field-size-spacing-control-horizontal-m);
   scroll-padding-bottom: var(
-    --sapphire-text-field-size-spacing-control-vertical
+    --sapphire-text-field-size-spacing-control-vertical-m
   );
 }
 
@@ -146,63 +161,26 @@
   resize: vertical;
 }
 
-/**
- * Note
- */
-
-.sapphire-text-field__note-row {
-  display: flex;
-  justify-content: space-between;
-  font-size: var(--sapphire-text-field-size-font-note);
-  line-height: var(--sapphire-text-field-size-line-height-note);
-  color: var(--sapphire-text-field-color-note-default);
-  margin-top: var(--sapphire-text-field-size-spacing-note-vertical);
-}
-
 .sapphire-text-field__counter {
   color: var(--sapphire-text-field-color-counter-default);
   padding-left: var(--sapphire-text-field-size-spacing-note-horizontal);
   margin-left: auto;
 }
 
-.sapphire-text-field__note {
-  display: block;
-  font-size: var(--sapphire-text-field-size-font-note);
-  line-height: var(--sapphire-text-field-size-line-height-note);
-  color: var(--sapphire-text-field-color-note-default);
-}
-
-.sapphire-text-field--error .sapphire-text-field__note {
-  color: var(--sapphire-text-field-color-note-error);
+.sapphire-text-field__counter--error {
+  color: var(--sapphire-text-field-color-counter-error);
 }
 
-.sapphire-text-field--error .sapphire-text-field__input-container {
+.sapphire-text-field--error {
   box-shadow: inset 0px 0px 0px var(--sapphire-text-field-size-width-border)
     var(--sapphire-text-field-color-border-error);
 }
 
-.sapphire-text-field--counter-error .sapphire-text-field__counter {
-  color: var(--sapphire-text-field-color-counter-error);
-}
-
 /**
  * Focus
  */
-.sapphire-text-field.is-focus .sapphire-text-field__input-container,
-.sapphire-text-field .sapphire-text-field__input-container:focus-within,
-.sapphire-text-field--error .sapphire-text-field__input-container:focus-within {
+.sapphire-text-field.is-focus,
+.sapphire-text-field:focus-within {
   box-shadow: inset 0px 0px 0px var(--sapphire-text-field-size-focus-ring)
     var(--sapphire-text-field-color-focus-ring);
 }
-
-/**
- * Disabled
- */
-.sapphire-text-field.is-disabled {
-  opacity: var(--sapphire-text-field-opacity-disabled);
-  cursor: not-allowed;
-}
-
-.sapphire-text-field.is-disabled .sapphire-text-field__input {
-  cursor: not-allowed;
-}

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

@@ -1,22 +1,18 @@
 declare const styles: {
   readonly "sapphire-text-field": string;
-  readonly "sapphire-text-field__label-container": string;
-  readonly "sapphire-text-field__label-text": string;
-  readonly "sapphire-text-field__input-container": string;
+  readonly "sapphire-text-field--medium": string;
   readonly "sapphire-text-field__input": string;
+  readonly "sapphire-text-field__input--align-right": string;
   readonly "sapphire-text-field--multiline": string;
   readonly "sapphire-text-field__affix": string;
   readonly "sapphire-text-field__affix--icon": string;
   readonly "sapphire-text-field--with-prefix": string;
   readonly "sapphire-text-field--with-postfix": string;
   readonly "sapphire-text-field--resizable": string;
-  readonly "sapphire-text-field__note-row": string;
   readonly "sapphire-text-field__counter": string;
-  readonly "sapphire-text-field__note": string;
+  readonly "sapphire-text-field__counter--error": string;
   readonly "sapphire-text-field--error": string;
-  readonly "sapphire-text-field--counter-error": string;
   readonly "is-focus": string;
-  readonly "is-disabled": string;
 };
 export = styles;
 

package/components/toast/toast.module.css

@@ -0,0 +1,101 @@
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0) translateX(-50%) scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) translateX(-50%) scale(1);
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.sapphire-toast-container {
+  position: fixed;
+  bottom: var(--sapphire-toast-size-offset);
+  left: 50%;
+}
+
+.sapphire-toast {
+  position: absolute;
+  bottom: 0;
+
+  /* absolute position & center */
+  transform: translateX(-50%);
+
+  /* let the text grow until max-width */
+  width: max-content;
+
+  overflow: hidden;
+  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);
+  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 */
+  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/
+   */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.sapphire-toast--entering {
+  animation-name: fade-in-up;
+}
+
+/* This represents the toast which appears immediately after the current one
+ * disappears */
+.sapphire-toast--queued {
+  opacity: 0;
+  animation-name: fade-in-up;
+  animation-delay: var(--sapphire-toast-time-transition);
+  animation-fill-mode: forwards;
+}
+
+.sapphire-toast--exiting {
+  animation-name: fade-out;
+  animation-fill-mode: forwards;
+}
+
+.sapphire-toast__content {
+  display: flex;
+  gap: var(--sapphire-toast-size-spacing-horizontal);
+  align-items: center;
+  justify-content: space-between;
+
+  background-color: var(--sapphire-toast-color-background);
+  color: var(--sapphire-toast-color-content);
+  font-family: var(--sapphire-toast-font-name);
+  font-size: var(--sapphire-toast-size-font);
+  font-weight: var(--sapphire-toast-font-weight);
+  line-height: var(--sapphire-toast-size-line-height);
+  padding: var(--sapphire-toast-size-spacing-vertical)
+    var(--sapphire-toast-size-spacing-horizontal);
+  padding-right: var(--sapphire-toast-size-spacing-end);
+}

package/components/tooltip/tooltip.module.css

@@ -8,17 +8,11 @@
 }
 
 .sapphire-tooltip {
-  background-color: var(--sapphire-tooltip-color-background);
+  display: inline-block;
   box-shadow: var(--sapphire-tooltip-shadow);
-  color: var(--sapphire-tooltip-color-content);
-  line-height: var(--sapphire-tooltip-size-line-height);
   max-width: var(--sapphire-tooltip-size-width-max);
   border-radius: var(--sapphire-tooltip-size-radius);
-  font-family: var(--sapphire-tooltip-font-name);
-  font-weight: var(--sapphire-tooltip-font-weight);
-  font-size: var(--sapphire-tooltip-size-font);
-  padding: var(--sapphire-tooltip-size-spacing-vertical)
-    var(--sapphire-tooltip-size-spacing-horizontal);
+  overflow: hidden;
   /* if implemented as focusable, we don't want the outline because this is not
    * an an interactive element in itself */
   outline: none;
@@ -39,3 +33,14 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.sapphire-tooltip__content {
+  background-color: var(--sapphire-tooltip-color-background);
+  color: var(--sapphire-tooltip-color-content);
+  font-family: var(--sapphire-tooltip-font-name);
+  font-weight: var(--sapphire-tooltip-font-weight);
+  font-size: var(--sapphire-tooltip-size-font);
+  line-height: var(--sapphire-tooltip-size-line-height);
+  padding: var(--sapphire-tooltip-size-spacing-vertical)
+    var(--sapphire-tooltip-size-spacing-horizontal);
+}

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

@@ -1,6 +1,7 @@
 declare const styles: {
   readonly "sapphire-tooltip": string;
   readonly "fade-in": string;
+  readonly "sapphire-tooltip__content": string;
 };
 export = styles;
 

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "16.3.0",
-  "sideEffects": false,
+  "version": "26.1.3",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
+  "sideEffects": false,
   "files": [
     "/components/**/*.css",
     "/components/**/*.d.ts",
     "/themes/**/*.css",
+    "/themes/**/*.scss",
     "/themes/**/*.js",
     "/themes/**/*.d.ts",
     "/build"
@@ -27,10 +28,11 @@
   },
   "scripts": {
     "build": "yarn run build:types && yarn run build:themes",
-    "test": "yarn run test:stylelint",
+    "test": "yarn run test:stylelint && yarn run test:findUnusedTokens",
     "test:stylelint": "stylelint components/**/*.module.css",
+    "test:findUnusedTokens": "stylelint components/**/*.module.css",
     "watch:types": "yarn run types -- -w",
-    "storybook": "start-storybook -p 6007",
+    "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6007",
     "build:storybook": "build-storybook --docs -o dist",
     "build:types": "tcm -p /**/*.module.css",
     "build:themes": "yarn build:themes:esm && yarn build:themes:cjs",
@@ -43,26 +45,28 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@danske/sapphire-react": "^2.1.4",
-    "@danske/sapphire-icons": "^1.1.0",
+    "@danske/sapphire-icons": "^2.0.0",
+    "@danske/sapphire-react": "3.0.0",
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-links": "^6.5.13",
     "@storybook/addons": "^6.5.13",
     "@storybook/html": "^6.5.13",
     "@storybook/theming": "^6.5.13",
     "babel-loader": "^8.2.2",
+    "cross-env": "^7.0.3",
     "css-loader": "^5.2.4",
     "identity-obj-proxy": "^3.0.0",
     "react": "16.14.0",
     "storybook-addon-themes": "^6.1.0",
     "storybook-css-modules": "^1.0.8",
+    "style-loader": "^2.0.0",
     "stylelint": "15.2.0",
     "stylelint-value-no-unknown-custom-properties": "4.0.0",
-    "style-loader": "^2.0.0",
     "typed-css-modules": "0.6.5",
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^19.0.0"
-  }
+    "@danske/sapphire-design-tokens": "^35.4.0"
+  },
+  "gitHead": "321608909172efb7ab3ed1574a3ceda82b08114e"
 }

package/themes/default-dark.assets.css

@@ -0,0 +1 @@
+@import '@danske/sapphire-design-tokens/build/themes/default-dark/assets/fonts/danske/fontFace.css';

package/themes/default-dark.d.ts

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

package/themes/default-dark.js

@@ -5,4 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 require("@danske/sapphire-design-tokens/build/themes/default-dark/assets/fonts/danske/fontFace.css");
 var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-tokens/build/themes/default-dark/css/tokens.module.css"));
-exports["default"] = tokens_module_css_1["default"]['sapphire-theme-default-dark'];
+var theme = {
+    themeClassName: tokens_module_css_1["default"]['sapphire-theme-default-dark'],
+    contrastThemeClassName: tokens_module_css_1["default"]['sapphire-theme-contrast']
+};
+exports["default"] = theme;

package/themes/default-dark.tokens.scss

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

package/themes/default.assets.css

@@ -0,0 +1 @@
+@import '@danske/sapphire-design-tokens/build/themes/default/assets/fonts/danske/fontFace.css';

package/themes/default.d.ts

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

package/themes/default.js

@@ -5,4 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 require("@danske/sapphire-design-tokens/build/themes/default/assets/fonts/danske/fontFace.css");
 var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-tokens/build/themes/default/css/tokens.module.css"));
-exports["default"] = tokens_module_css_1["default"]['sapphire-theme-default'];
+var theme = {
+    themeClassName: tokens_module_css_1["default"]['sapphire-theme-default'],
+    contrastThemeClassName: tokens_module_css_1["default"]['sapphire-theme-contrast']
+};
+exports["default"] = theme;

package/themes/default.tokens.scss

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

package/themes/index.d.ts

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

package/themes/june-dark.d.ts

@@ -1,4 +1,5 @@
 import '@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/fira/fontFace.css';
 import '@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/playfair/fontFace.css';
-declare const _default: string;
-export default _default;
+import type { Theme } from '.';
+declare const theme: Theme;
+export default theme;

package/themes/june-dark.js

@@ -6,4 +6,8 @@ exports.__esModule = true;
 require("@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/fira/fontFace.css");
 require("@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/playfair/fontFace.css");
 var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-tokens/build/themes/june-dark/css/tokens.module.css"));
-exports["default"] = tokens_module_css_1["default"]['sapphire-theme-june-dark'];
+var theme = {
+    themeClassName: tokens_module_css_1["default"]['sapphire-theme-june-dark'],
+    contrastThemeClassName: tokens_module_css_1["default"]['sapphire-theme-contrast']
+};
+exports["default"] = theme;

package/themes/june-dark.scss

@@ -0,0 +1,3 @@
+@use '@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/fira/fontFace.css';
+@use '@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/playfair/fontFace.css';
+@use '@danske/sapphire-design-tokens/build/themes/june-dark/css/tokens.css';

package/themes/june.d.ts

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

package/themes/june.js

@@ -6,4 +6,8 @@ exports.__esModule = true;
 require("@danske/sapphire-design-tokens/build/themes/june/assets/fonts/fira/fontFace.css");
 require("@danske/sapphire-design-tokens/build/themes/june/assets/fonts/playfair/fontFace.css");
 var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-tokens/build/themes/june/css/tokens.module.css"));
-exports["default"] = tokens_module_css_1["default"]['sapphire-theme-june'];
+var theme = {
+    themeClassName: tokens_module_css_1["default"]['sapphire-theme-june'],
+    contrastThemeClassName: tokens_module_css_1["default"]['sapphire-theme-contrast']
+};
+exports["default"] = theme;

package/themes/june.scss

@@ -0,0 +1,3 @@
+@use '@danske/sapphire-design-tokens/build/themes/june/assets/fonts/fira/fontFace.css';
+@use '@danske/sapphire-design-tokens/build/themes/june/assets/fonts/playfair/fontFace.css';
+@use '@danske/sapphire-design-tokens/build/themes/june/css/tokens.css';