@danske/sapphire-css 50.2.1 → 52.2.0

package/components/textField/textField.module.css

@@ -34,12 +34,18 @@
   font-size: var(--sapphire-semantic-size-font-control-md);
 }
 
+.sapphire-text-field--sm {
+  border-radius: var(--sapphire-semantic-size-radius-sm);
+  height: var(--sapphire-semantic-size-height-control-sm);
+  font-size: var(--sapphire-semantic-size-font-control-md);
+}
+
 .sapphire-text-field__input {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   margin: 0;
-  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
   line-height: var(--sapphire-semantic-size-line-height-md);
 
   font-family: inherit;
@@ -53,10 +59,6 @@
   outline: none;
 }
 
-.sapphire-text-field--md .sapphire-text-field__input {
-  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
-}
-
 /**
  * Placeholder
  */
@@ -82,6 +84,9 @@
 .sapphire-text-field--md:not(.sapphire-text-field--multiline) {
   gap: var(--sapphire-semantic-size-spacing-xs);
 }
+.sapphire-text-field--sm:not(.sapphire-text-field--multiline) {
+  gap: var(--sapphire-semantic-size-spacing-2xs);
+}
 
 /**
  * Prefix/postfix
@@ -100,8 +105,8 @@
   margin-left: var(--sapphire-semantic-size-spacing-control-horizontal-md);
 }
 
-.sapphire-text-field--md .sapphire-text-field__prefix {
-  margin-left: var(--sapphire-semantic-size-spacing-control-horizontal-md);
+.sapphire-text-field--sm .sapphire-text-field__prefix {
+  margin-left: var(--sapphire-semantic-size-spacing-control-horizontal-sm);
 }
 
 /**
@@ -121,8 +126,8 @@
   margin-right: var(--sapphire-semantic-size-spacing-control-horizontal-md);
 }
 
-.sapphire-text-field--md .sapphire-text-field__postfix {
-  margin-right: var(--sapphire-semantic-size-spacing-control-horizontal-md);
+.sapphire-text-field--sm .sapphire-text-field__postfix {
+  margin-right: var(--sapphire-semantic-size-spacing-control-horizontal-sm);
 }
 
 /**
@@ -141,6 +146,12 @@
   height: var(--sapphire-semantic-size-icon-sm);
 }
 
+.sapphire-text-field--sm .sapphire-text-field__prefix--icon,
+.sapphire-text-field--sm .sapphire-text-field__postfix--icon {
+  width: var(--sapphire-semantic-size-icon-sm);
+  height: var(--sapphire-semantic-size-icon-sm);
+}
+
 /**
  * Multiline
  * (this does not support a prefix/postfix)
@@ -156,7 +167,7 @@
   resize: none;
   width: 100%;
   padding: var(--sapphire-semantic-size-spacing-control-vertical-lg)
-    var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+    var(--sapphire-semantic-size-spacing-control-horizontal-md);
   scroll-padding-bottom: var(
     --sapphire-semantic-size-spacing-control-vertical-lg
   );
@@ -171,6 +182,15 @@
   );
 }
 
+.sapphire-text-field--sm.sapphire-text-field--multiline
+  .sapphire-text-field__input {
+  padding: var(--sapphire-semantic-size-spacing-control-vertical-sm)
+    var(--sapphire-semantic-size-spacing-control-horizontal-sm);
+  scroll-padding-bottom: var(
+    --sapphire-semantic-size-spacing-control-vertical-sm
+  );
+}
+
 /**
  * Resizable
  */
@@ -276,6 +296,15 @@
   gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
+.sapphire-text-field--sm .sapphire-text-field__stepper {
+  padding: var(--sapphire-semantic-size-spacing-2xs)
+    calc(
+      var(--sapphire-semantic-size-spacing-2xs) +
+        var(--sapphire-semantic-size-border-sm)
+    );
+  gap: var(--sapphire-semantic-size-spacing-2xs);
+}
+
 .sapphire-text-field:has(.sapphire-text-field__stepper)
   .sapphire-text-field__postfix {
   margin-right: 0;
@@ -331,3 +360,7 @@
 .sapphire-text-field--md.sapphire-text-field__stepper-button {
   width: var(--sapphire-semantic-size-icon-sm);
 }
+
+.sapphire-text-field--sm.sapphire-text-field__stepper-button {
+  width: var(--sapphire-semantic-size-icon-sm);
+}

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

@@ -1,6 +1,7 @@
 declare const styles: {
   readonly "sapphire-text-field": string;
   readonly "sapphire-text-field--md": string;
+  readonly "sapphire-text-field--sm": string;
   readonly "sapphire-text-field__input": string;
   readonly "sapphire-text-field__input--align-right": string;
   readonly "sapphire-text-field--multiline": string;

package/components/toast/toast.module.css

@@ -280,6 +280,7 @@
   justify-content: center;
   padding: var(--sapphire-semantic-size-spacing-2xs);
   overflow: hidden;
+  user-select: text;
 }
 
 .sapphire-toast__text-content > :nth-child(1 of :not(:only-child)) {

package/components/truncate-overflow/truncate-overflow.module.css

@@ -0,0 +1,7 @@
+.sapphire-truncate-overflow {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}

package/components/truncate-overflow/truncate-overflow.module.css.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "50.2.1",
+  "version": "52.2.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -32,8 +32,8 @@
     "test:stylelint": "stylelint components/**/*.module.css",
     "test:findUnusedTokens": "stylelint components/**/*.module.css",
     "watch:types": "yarn run types -- -w",
-    "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6007",
-    "build:storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook --docs -o dist",
+    "storybook": "storybook dev -p 6007",
+    "build:storybook": "storybook build --docs -o dist",
     "build:types": "tcm -p /**/*.module.css",
     "build:themes": "yarn build:themes:esm && yarn build:themes:cjs",
     "build:themes:esm": "tsc -p tsconfig.themes.json --module ES2020 --outDir build/themes/esm && tsc -p tsconfig.themes.json --module ES2020 --outDir themes",
@@ -42,33 +42,30 @@
     "postpublish": "node ../../../scripts/append-release-notes.js"
   },
   "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-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.0.1",
-    "@mdx-js/react": "^1.6.22",
-    "@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",
+    "@danske/sapphire-react": "^5.17.3",
+    "@storybook/addon-docs": "8.6.14",
+    "@storybook/addon-links": "8.6.14",
+    "@storybook/addon-toolbars": "8.6.14",
+    "@storybook/blocks": "8.6.14",
+    "@storybook/html": "8.6.14",
+    "@storybook/html-vite": "8.6.14",
+    "@storybook/manager-api": "8.6.14",
+    "@storybook/theming": "8.6.14",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.4",
+    "html-webpack-plugin": "^4.5.2",
     "identity-obj-proxy": "^3.0.0",
     "react": "^18.3.1",
-    "storybook-addon-themes": "^6.1.0",
-    "storybook-css-modules": "^1.0.8",
-    "style-loader": "^2.0.0",
+    "react-dom": "^18.3.1",
+    "storybook": "8.6.14",
     "stylelint": "15.2.0",
     "stylelint-value-no-unknown-custom-properties": "4.0.0",
     "typed-css-modules": "0.6.5",
-    "typescript": "~4.6.4"
+    "typescript": "~4.6.4",
+    "vite": "^5.4.19"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^42.5.0"
+    "@danske/sapphire-design-tokens": "^43.1.0"
   },
-  "gitHead": "468518f32524d0aa811f5d273a5c4d4a6b1dcf62"
+  "gitHead": "c659e1463951455fb38f07b7b429083261776798"
 }

package/themes/default-dark.js

@@ -8,6 +8,9 @@ var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-token
 var theme = {
     themeClassName: tokens_module_css_1["default"]['sapphire-theme-default-dark'],
     themeSecondaryModifierClassName: tokens_module_css_1["default"]['sapphire-theme--secondary'],
-    themeContrastModifierClassName: tokens_module_css_1["default"]['sapphire-theme--contrast']
+    themeContrastModifierClassName: tokens_module_css_1["default"]['sapphire-theme--contrast'],
+    themeScaleSmModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-sm'],
+    themeScaleMdModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-md'],
+    themeScaleAutoModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-auto']
 };
 exports["default"] = theme;

package/themes/default.js

@@ -9,6 +9,9 @@ var theme = {
     themeClassName: tokens_module_css_1["default"]['sapphire-theme-default'],
     themeSecondaryModifierClassName: tokens_module_css_1["default"]['sapphire-theme--secondary'],
     themeTertiaryModifierClassName: tokens_module_css_1["default"]['sapphire-theme--tertiary'],
-    themeContrastModifierClassName: tokens_module_css_1["default"]['sapphire-theme--contrast']
+    themeContrastModifierClassName: tokens_module_css_1["default"]['sapphire-theme--contrast'],
+    themeScaleSmModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-sm'],
+    themeScaleMdModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-md'],
+    themeScaleAutoModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-auto']
 };
 exports["default"] = theme;

package/themes/index.d.ts

@@ -4,4 +4,7 @@ export interface Theme {
     themeSecondaryModifierClassName?: string;
     themeTertiaryModifierClassName?: string;
     themeContrastModifierClassName?: string;
+    themeScaleSmModifierClassName?: string;
+    themeScaleMdModifierClassName?: string;
+    themeScaleAutoModifierClassName?: string;
 }

package/themes/realkredit.js

@@ -6,6 +6,9 @@ exports.__esModule = true;
 require("@danske/sapphire-design-tokens/build/themes/realkredit/assets/fonts/realkredit/fontFace.css");
 var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-tokens/build/themes/realkredit/css/tokens.module.css"));
 var theme = {
-    themeClassName: tokens_module_css_1["default"]['sapphire-theme-realkredit']
+    themeClassName: tokens_module_css_1["default"]['sapphire-theme-realkredit'],
+    themeScaleSmModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-sm'],
+    themeScaleMdModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-md'],
+    themeScaleAutoModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-auto']
 };
 exports["default"] = theme;