@danske/sapphire-css 16.3.0 → 25.1.0

package/README.md

@@ -4,14 +4,10 @@ This is the implementation of Sapphire design system as css style rules.
 
 ## List of Styles
 
-To view the list of available classes you can <!--visit https://sapphire.danskenet.net/  or -->run `npm run storybook` from this folder
+To view the list of available classes you can run `npm run storybook` from this folder
 
 ## Use a style/class
 
-If you haven't configured npm for `@sapphire` in your repo run:
-`npm i @danske/sapphire-css --registry=http://artifactory.danskenet.net/artifactory/api/npm/joined-npm-build`
-
-otherwise:
 `npm i @danske/sapphire-css`
 
 after this you can import css and start using it.
@@ -49,9 +45,3 @@ In js/ts:
 ```js
 import defaultThemeClass, { tokens } from '@danske/sapphire-css/themes/default';
 ```
-
-## Further help
-
-Drop a message
-[here](https://teams.microsoft.com/l/channel/19%3a03424de3050e4e59a07de47246e264be%40thread.tacv2/General?groupId=446305d4-c81d-417a-97de-74c2759fb760&tenantId=c7d1b6e9-1447-457b-9223-ac25df4941bf)
-in case of any issue.

package/build/themes/cjs/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/build/themes/cjs/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/build/themes/cjs/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/build/themes/cjs/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/build/themes/cjs/index.d.ts

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

package/build/themes/cjs/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/build/themes/cjs/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/build/themes/cjs/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/build/themes/cjs/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/build/themes/esm/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/build/themes/esm/default-dark.js

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

package/build/themes/esm/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/build/themes/esm/default.js

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

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

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

package/build/themes/esm/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/build/themes/esm/june-dark.js

@@ -1,4 +1,8 @@
 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';
 import styles from '@danske/sapphire-design-tokens/build/themes/june-dark/css/tokens.module.css';
-export default styles['sapphire-theme-june-dark'];
+var theme = {
+    themeClassName: styles['sapphire-theme-june-dark'],
+    contrastThemeClassName: styles['sapphire-theme-contrast']
+};
+export default theme;

package/build/themes/esm/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/build/themes/esm/june.js

@@ -1,4 +1,8 @@
 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';
 import styles from '@danske/sapphire-design-tokens/build/themes/june/css/tokens.module.css';
-export default styles['sapphire-theme-june'];
+var theme = {
+    themeClassName: styles['sapphire-theme-june'],
+    contrastThemeClassName: styles['sapphire-theme-contrast']
+};
+export default theme;

package/components/accordion/accordion.module.css

@@ -0,0 +1,163 @@
+.sapphire-accordion {
+  box-sizing: border-box;
+  width: 100%;
+
+  /* sizing */
+  padding: 0;
+  margin: 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;
+}
+
+.sapphire-accordion__item {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  line-height: var(--sapphire-accordion-size-line-height);
+  font-family: var(--sapphire-accordion-font-name);
+  background-color: var(--sapphire-accordion-color-background-item);
+  color: var(--sapphire-accordion-color-content);
+  border-bottom: var(--sapphire-accordion-size-width-border) solid
+    var(--sapphire-accordion-color-border);
+}
+
+.sapphire-accordion--without-last-divider .sapphire-accordion__item:last-child {
+  border-bottom: none;
+}
+
+/* Disabled */
+
+.sapphire-accordion__item.is-disabled .sapphire-accordion__item-header,
+.sapphire-accordion__item.is-disabled
+  .sapphire-accordion__item-content-wrapper {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  opacity: var(--sapphire-accordion-opacity-disabled);
+}
+
+/* Header */
+
+.sapphire-accordion__item-header {
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--sapphire-accordion-size-spacing-header-vertical)
+    var(--sapphire-accordion-size-spacing-header-horizontal);
+  border: none;
+  background-color: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  color: inherit;
+  width: 100%;
+}
+
+/* Hover header*/
+
+.sapphire-accordion__item:not(.is-disabled)
+  .sapphire-accordion__item-header:not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-accordion__item:not(.is-disabled)
+  .sapphire-accordion__item-header:not(:active):not(.is-active).is-hover {
+  background-color: var(--sapphire-accordion-color-background-header-hover);
+}
+
+/* Active header */
+
+.sapphire-accordion__item:not(.is-disabled)
+  .sapphire-accordion__item-header.is-active,
+.sapphire-accordion__item:not(.is-disabled)
+  .sapphire-accordion__item-header:active,
+.sapphire-accordion__item:not(.is-disabled)
+  .sapphire-accordion__item-header:not(.js-focus):focus-visible:active {
+  background-color: var(--sapphire-accordion-color-background-header-active);
+}
+
+/* Focus header*/
+
+.sapphire-accordion__item-header:focus {
+  outline: none;
+}
+
+.sapphire-accordion__item:not(.is-disabled)
+  .sapphire-accordion__item-header.is-focus,
+.sapphire-accordion__item:not(.is-disabled)
+  .sapphire-accordion__item-header:not(.js-focus):focus-visible {
+  outline: none;
+  box-shadow: inset 0px 0px 0px var(--sapphire-accordion-size-focus-ring)
+    var(--sapphire-accordion-color-focus-ring);
+  border: 0;
+  border-radius: var(--sapphire-accordion-size-radius);
+}
+
+/* Remove closed item's border if header is focused */
+.sapphire-accordion__item:not(.sapphire-accordion__item--open):has(.sapphire-accordion__item-header.is-focus, .sapphire-accordion__item-header:not(.js-focus):focus-visible) {
+  border: none;
+}
+
+/* Header elements */
+
+.sapphire-accordion__item-heading {
+  font-size: var(--sapphire-accordion-size-font-heading);
+  font-weight: var(--sapphire-accordion-font-weight-heading);
+  text-align: left;
+  flex: 1;
+  /* Wrap if title is long */
+  min-width: 0px;
+  word-wrap: break-word;
+}
+
+.sapphire-accordion__item-arrow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--sapphire-accordion-size-height-arrow);
+  height: var(--sapphire-accordion-size-height-arrow);
+  transition: transform var(--sapphire-accordion-time-transition-arrow)
+    ease-in-out;
+}
+.sapphire-accordion__item--open .sapphire-accordion__item-arrow {
+  transform: rotate(180deg);
+}
+
+/* Content */
+
+.sapphire-accordion__item-content-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--sapphire-accordion-time-transition-body)
+    ease-in-out;
+}
+
+.sapphire-accordion__item-content {
+  font-size: var(--sapphire-accordion-size-font-content);
+  font-weight: var(--sapphire-accordion-font-weight-content);
+  overflow: hidden;
+  transition: padding-top var(--sapphire-accordion-time-transition-body)
+      ease-in-out,
+    padding-bottom var(--sapphire-accordion-time-transition-body) ease-in-out;
+  padding-right: var(--sapphire-accordion-size-spacing-body-horizontal);
+  padding-left: var(--sapphire-accordion-size-spacing-body-horizontal);
+}
+
+.sapphire-accordion__item--open .sapphire-accordion__item-content-wrapper {
+  grid-template-rows: 1fr;
+}
+
+.sapphire-accordion__item--open .sapphire-accordion__item-content {
+  padding-top: var(--sapphire-accordion-size-spacing-body-top);
+  padding-bottom: var(--sapphire-accordion-size-spacing-body-bottom);
+}