@danske/sapphire-css 16.3.0

package/components/textField/textField.module.css

@@ -0,0 +1,208 @@
+.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);
+
+  /* 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;
+
+  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__input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0 var(--sapphire-text-field-size-spacing-control-horizontal);
+  line-height: var(--sapphire-text-field-size-line-height-content);
+
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: var(--sapphire-text-field-size-font-weight-input);
+
+  caret-color: var(--sapphire-text-field-color-caret);
+  color: inherit;
+
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+/**
+ * Placeholder
+ */
+.sapphire-text-field__input::placeholder {
+  opacity: 1; /* some browsers set a lower than 1 opacity */
+  color: var(--sapphire-text-field-color-placeholder);
+}
+
+/**
+ * Single line
+ * (this supports a prefix/postfix)
+ */
+.sapphire-text-field:not(.sapphire-text-field--multiline)
+  .sapphire-text-field__input-container {
+  gap: var(--sapphire-text-field-size-spacing-control-gap);
+}
+
+/**
+ * Prefix/postfix
+ */
+
+.sapphire-text-field .sapphire-text-field__affix {
+  color: var(--sapphire-text-field-color-affix);
+}
+
+.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);
+}
+
+.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 .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 .sapphire-text-field__input {
+  padding-right: 0;
+}
+
+/**
+ * Multiline
+ * (this does not support a prefix/postfix)
+ */
+.sapphire-text-field--multiline .sapphire-text-field__input-container {
+  display: inline-block;
+  width: 100%;
+  line-height: 0;
+  height: unset;
+  padding: 0;
+}
+
+.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);
+  scroll-padding-bottom: var(
+    --sapphire-text-field-size-spacing-control-vertical
+  );
+}
+
+/**
+ * Resizable
+ */
+.sapphire-text-field--multiline.sapphire-text-field--resizable
+  .sapphire-text-field__input {
+  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--error .sapphire-text-field__input-container {
+  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 {
+  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

@@ -0,0 +1,22 @@
+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__input": 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--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.d.ts

@@ -0,0 +1,12 @@
+declare const styles: {
+  readonly "sapphire-toast-container": string;
+  readonly "sapphire-toast": string;
+  readonly "sapphire-toast--entering": string;
+  readonly "fade-in-up": string;
+  readonly "sapphire-toast--queued": string;
+  readonly "sapphire-toast--exiting": string;
+  readonly "fade-out": string;
+  readonly "sapphire-toast__content": string;
+};
+export = styles;
+

package/components/tooltip/tooltip.module.css

@@ -0,0 +1,41 @@
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.sapphire-tooltip {
+  background-color: var(--sapphire-tooltip-color-background);
+  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);
+  /* if implemented as focusable, we don't want the outline because this is not
+   * an an interactive element in itself */
+  outline: none;
+
+  animation: fade-in var(--sapphire-tooltip-time-transition) ease-in-out;
+
+  /* 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;
+}

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

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

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@danske/sapphire-css",
+  "version": "16.3.0",
+  "sideEffects": false,
+  "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
+  "license": "SEE LICENSE IN LICENSE",
+  "files": [
+    "/components/**/*.css",
+    "/components/**/*.d.ts",
+    "/themes/**/*.css",
+    "/themes/**/*.js",
+    "/themes/**/*.d.ts",
+    "/build"
+  ],
+  "exports": {
+    "./themes": {
+      "require": "./build/themes/cjs/index.js",
+      "import": "./build/themes/esm/index.js"
+    },
+    "./themes/*": {
+      "style": "./themes/*",
+      "sass": "./themes/*",
+      "require": "./build/themes/cjs/*.js",
+      "import": "./build/themes/esm/*.js"
+    },
+    "./components/*": "./components/*"
+  },
+  "scripts": {
+    "build": "yarn run build:types && yarn run build:themes",
+    "test": "yarn run test:stylelint",
+    "test:stylelint": "stylelint components/**/*.module.css",
+    "watch:types": "yarn run types -- -w",
+    "storybook": "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",
+    "build:themes:esm": "tsc --module ES2020 --outDir build/themes/esm && tsc --module ES2020 --outDir themes",
+    "build:themes:cjs": "tsc --module CommonJS --outDir build/themes/cjs && tsc --module CommonJS",
+    "prepare": "yarn run build"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@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",
+    "@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",
+    "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",
+    "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"
+  }
+}

package/themes/default-dark.css

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

package/themes/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/themes/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/themes/default.css

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

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

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

package/themes/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/themes/june-dark.css

@@ -0,0 +1,3 @@
+@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 '~@danske/sapphire-design-tokens/build/themes/june-dark/css/tokens.css';

package/themes/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/themes/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/themes/june.css

@@ -0,0 +1,3 @@
+@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 '~@danske/sapphire-design-tokens/build/themes/june/css/tokens.css';

package/themes/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/themes/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'];