@danske/sapphire-css 16.3.0

package/LICENSE

@@ -0,0 +1,7 @@
+License
+
+Copyright (c) Danske Bank A/S
+
+The contents of this package is proprietary to Danske Bank A/S and/or its
+licensors. You are not allowed to download and/or use any part of the contents
+for any purpose without express, written permission from Danske Bank A/S.

package/README.md

@@ -0,0 +1,57 @@
+# @danske/sapphire-css
+
+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
+
+## 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.
+
+```js
+import '@danske/sapphire-css/button/button.module.css';
+
+const MyApp = () => {
+  return (
+    <button class="sapphire-button sapphire-button--primary">
+      Primary button
+    </button>
+  );
+};
+```
+
+You will find more example in [storybook documentation](#list-of-components)
+
+## Themes
+
+Each theme is available in `.css` and `.js` format. Both of them import the corresponding css files
+for that theme.
+The default export of the `.js` format is the theme's css class. It also exports `tokens` object.
+
+Themes can be imported from `@danske/sapphire-css/themes/` path:
+
+In css:
+
+```css
+@import '~@danske/sapphire-css/themes/default.css';
+```
+
+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

@@ -0,0 +1,3 @@
+import '@danske/sapphire-design-tokens/build/themes/default-dark/assets/fonts/danske/fontFace.css';
+declare const _default: string;
+export default _default;

package/build/themes/cjs/default-dark.js

@@ -0,0 +1,8 @@
+"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/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'];

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

@@ -0,0 +1,3 @@
+import '@danske/sapphire-design-tokens/build/themes/default/assets/fonts/danske/fontFace.css';
+declare const _default: string;
+export default _default;

package/build/themes/cjs/default.js

@@ -0,0 +1,8 @@
+"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/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'];

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

@@ -0,0 +1 @@
+export { default as tokens } from '@danske/sapphire-design-tokens/build/themes';

package/build/themes/cjs/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+exports.__esModule = true;
+exports.tokens = void 0;
+var themes_1 = require("@danske/sapphire-design-tokens/build/themes");
+__createBinding(exports, themes_1, "default", "tokens");

package/build/themes/cjs/june-dark.d.ts

@@ -0,0 +1,4 @@
+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;

package/build/themes/cjs/june-dark.js

@@ -0,0 +1,9 @@
+"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/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'];

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

@@ -0,0 +1,4 @@
+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;

package/build/themes/cjs/june.js

@@ -0,0 +1,9 @@
+"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/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'];

package/build/themes/esm/default-dark.d.ts

@@ -0,0 +1,3 @@
+import '@danske/sapphire-design-tokens/build/themes/default-dark/assets/fonts/danske/fontFace.css';
+declare const _default: string;
+export default _default;

package/build/themes/esm/default-dark.js

@@ -0,0 +1,3 @@
+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'];

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

@@ -0,0 +1,3 @@
+import '@danske/sapphire-design-tokens/build/themes/default/assets/fonts/danske/fontFace.css';
+declare const _default: string;
+export default _default;

package/build/themes/esm/default.js

@@ -0,0 +1,3 @@
+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'];

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

@@ -0,0 +1 @@
+export { default as tokens } from '@danske/sapphire-design-tokens/build/themes';

package/build/themes/esm/index.js

@@ -0,0 +1 @@
+export { default as tokens } from '@danske/sapphire-design-tokens/build/themes';

package/build/themes/esm/june-dark.d.ts

@@ -0,0 +1,4 @@
+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;

package/build/themes/esm/june-dark.js

@@ -0,0 +1,4 @@
+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'];

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

@@ -0,0 +1,4 @@
+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;

package/build/themes/esm/june.js

@@ -0,0 +1,4 @@
+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'];

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

@@ -0,0 +1,19 @@
+declare const styles: {
+  readonly "sapphire-accordion": string;
+  readonly "sapphire-accordion__item": string;
+  readonly "sapphire-accordion--without-last-divider": string;
+  readonly "is-disabled": string;
+  readonly "sapphire-accordion__item-header": string;
+  readonly "sapphire-accordion__item-content-wrapper": string;
+  readonly "is-active": string;
+  readonly "js-hover": string;
+  readonly "is-hover": string;
+  readonly "js-focus": string;
+  readonly "is-focus": string;
+  readonly "sapphire-accordion__item--open": string;
+  readonly "sapphire-accordion__item-heading": string;
+  readonly "sapphire-accordion__item-arrow": string;
+  readonly "sapphire-accordion__item-content": string;
+};
+export = styles;
+

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

@@ -0,0 +1,27 @@
+declare const styles: {
+  readonly "sapphire-avatar": string;
+  readonly "sapphire-avatar--extra-small": string;
+  readonly "sapphire-avatar--small": string;
+  readonly "sapphire-avatar--large": string;
+  readonly "sapphire-avatar--positive": string;
+  readonly "sapphire-avatar--negative": string;
+  readonly "sapphire-avatar--warning": string;
+  readonly "sapphire-avatar--informative": string;
+  readonly "sapphire-avatar--aqua": string;
+  readonly "sapphire-avatar--copper": string;
+  readonly "sapphire-avatar--electro": string;
+  readonly "sapphire-avatar--indigo": string;
+  readonly "sapphire-avatar--lime": string;
+  readonly "sapphire-avatar--pink": string;
+  readonly "sapphire-avatar--violet": string;
+  readonly "sapphire-avatar--gold": string;
+  readonly "sapphire-avatar--beige": string;
+  readonly "sapphire-avatar--orchid": string;
+  readonly "sapphire-avatar--gray": string;
+  readonly "sapphire-avatar--cobalt": string;
+  readonly "sapphire-avatar--forestGreen": string;
+  readonly "sapphire-avatar--teal": string;
+  readonly "sapphire-avatar--orange": string;
+};
+export = styles;
+

package/components/backdrop/backdrop.module.css

@@ -0,0 +1,8 @@
+.sapphire-backdrop {
+  width: 100%;
+  height: 100%;
+  background-color: var(--sapphire-backdrop-color-background);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "sapphire-backdrop": string;
+};
+export = styles;
+

package/components/badge/badge.module.css

@@ -0,0 +1,121 @@
+@keyframes pop-in {
+  0% {
+    transform: scale(0) translate(50%, -50%);
+    opacity: 0;
+  }
+
+  25% {
+    opacity: 0.1;
+  }
+
+  100% {
+    transform: scale(1) translate(50%, -50%);
+  }
+}
+
+@keyframes pop-out {
+  0% {
+    transform: scale(1) translate(50%, -50%);
+  }
+
+  75% {
+    opacity: 0.1;
+  }
+
+  100% {
+    transform: scale(0) translate(50%, -50%);
+    opacity: 0;
+    display: none;
+  }
+}
+
+.sapphire-badge {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: var(--sapphire-badge-color-content-default);
+  font-family: var(--sapphire-badge-font-name);
+  font-weight: var(--sapphire-badge-font-weight);
+  font-style: normal;
+  /* 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-badge--pop-in {
+  animation: pop-in var(--sapphire-badge-time-transition)
+    cubic-bezier(0.55, -0.49, 0.39, 1.49);
+}
+
+.sapphire-badge--pop-out {
+  animation: pop-out var(--sapphire-badge-time-transition) forwards;
+}
+
+/* Sizes */
+.sapphire-badge--large {
+  height: var(--sapphire-badge-size-height-large);
+  border-radius: var(--sapphire-badge-size-radius-large);
+  padding: var(--sapphire-badge-size-spacing-large-vertical)
+    var(--sapphire-badge-size-spacing-large-horizontal);
+  font-size: var(--sapphire-badge-size-font-primary);
+}
+
+.sapphire-badge--medium {
+  height: var(--sapphire-badge-size-height-medium);
+  border-radius: var(--sapphire-badge-size-radius-medium);
+  padding: 0 var(--sapphire-badge-size-spacing-medium-horizontal);
+  font-size: var(--sapphire-badge-size-font-secondary);
+  min-width: var(--sapphire-badge-size-width-medium);
+  box-sizing: border-box;
+}
+
+.sapphire-badge--small {
+  min-width: var(--sapphire-badge-size-width-small);
+  height: var(--sapphire-badge-size-height-small);
+  border-radius: var(--sapphire-badge-size-radius-small);
+}
+
+/* Variants */
+.sapphire-badge--primary {
+  background-color: var(--sapphire-badge-color-background-primary);
+}
+
+.sapphire-badge--secondary {
+  background-color: var(--sapphire-badge-color-background-secondary);
+}
+
+/* Positioned */
+.sapphire-badge-container {
+  position: relative;
+}
+
+/* Placement in container with circular or circular-looking content */
+.sapphire-badge-container .sapphire-badge {
+  position: absolute;
+  top: 14%;
+  right: 14%;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 0;
+  pointer-events: none;
+}
+
+/* Placement in container with rectangular content */
+.sapphire-badge-container--rectangle .sapphire-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 0;
+  pointer-events: none;
+}

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

@@ -0,0 +1,16 @@
+declare const styles: {
+  readonly "sapphire-badge": string;
+  readonly "sapphire-badge--pop-in": string;
+  readonly "pop-in": string;
+  readonly "sapphire-badge--pop-out": string;
+  readonly "pop-out": string;
+  readonly "sapphire-badge--large": string;
+  readonly "sapphire-badge--medium": string;
+  readonly "sapphire-badge--small": string;
+  readonly "sapphire-badge--primary": string;
+  readonly "sapphire-badge--secondary": string;
+  readonly "sapphire-badge-container": string;
+  readonly "sapphire-badge-container--rectangle": string;
+};
+export = styles;
+