@danske/sapphire-css 26.6.1 → 27.0.0

package/components/textField/textField.module.css

@@ -9,8 +9,8 @@
   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);
+  color: var(--sapphire-text-field-color-content-control);
+  background-color: var(--sapphire-text-field-color-background-control);
   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);
@@ -85,44 +85,56 @@
  * Prefix/postfix
  */
 
-.sapphire-text-field .sapphire-text-field__affix {
+.sapphire-text-field:has(.sapphire-text-field__prefix)
+  .sapphire-text-field__input {
+  padding-left: 0;
+}
+
+.sapphire-text-field .sapphire-text-field__prefix {
   color: var(--sapphire-text-field-color-affix);
   flex-shrink: 0;
   z-index: 1;
+  margin-left: var(--sapphire-text-field-size-spacing-control-horizontal-l);
 }
 
-.sapphire-text-field .sapphire-text-field__affix--icon {
-  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__prefix {
+  margin-left: var(--sapphire-text-field-size-spacing-control-horizontal-m);
 }
 
-.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);
-}
+/**
+ * Postfix
+ */
 
-.sapphire-text-field--with-prefix {
-  padding-left: var(--sapphire-text-field-size-spacing-control-horizontal-l);
+.sapphire-text-field:has(.sapphire-text-field__postfix)
+  .sapphire-text-field__input {
+  padding-right: 0;
 }
 
-.sapphire-text-field--medium .sapphire-text-field--with-prefix {
-  padding-left: var(--sapphire-text-field-size-spacing-control-horizontal-m);
+.sapphire-text-field .sapphire-text-field__postfix {
+  color: var(--sapphire-text-field-color-affix);
+  flex-shrink: 0;
+  z-index: 1;
+  margin-right: var(--sapphire-text-field-size-spacing-control-horizontal-l);
 }
 
-.sapphire-text-field--with-prefix .sapphire-text-field__input {
-  padding-left: 0;
+.sapphire-text-field--medium .sapphire-text-field__postfix {
+  margin-right: var(--sapphire-text-field-size-spacing-control-horizontal-m);
 }
 
-.sapphire-text-field--with-postfix {
-  padding-right: var(--sapphire-text-field-size-spacing-control-horizontal-l);
-}
+/**
+ * Prefix/postfix icon
+ */
 
-.sapphire-text-field--medium .sapphire-text-field--with-postfix {
-  padding-right: var(--sapphire-text-field-size-spacing-control-horizontal-m);
+.sapphire-text-field .sapphire-text-field__prefix--icon,
+.sapphire-text-field .sapphire-text-field__postfix--icon {
+  width: var(--sapphire-text-field-size-affix-icon-width-l);
+  height: var(--sapphire-text-field-size-affix-icon-height-l);
 }
 
-.sapphire-text-field--with-postfix .sapphire-text-field__input {
-  padding-right: 0;
+.sapphire-text-field--medium .sapphire-text-field__prefix--icon,
+.sapphire-text-field--medium .sapphire-text-field__postfix--icon {
+  width: var(--sapphire-text-field-size-affix-icon-width-m);
+  height: var(--sapphire-text-field-size-affix-icon-height-m);
 }
 
 /**
@@ -199,5 +211,78 @@
   * or focusing on the list of browser autofilling suggestions.
   */
   box-shadow: 0 0 0 var(--sapphire-text-field-size-height-field-l) inset
-    var(--sapphire-text-field-color-background) !important;
+    var(--sapphire-text-field-color-background-control) !important;
+}
+
+/**
+ * Stepper
+ * 
+ * This is used in some numeric inputs
+ */
+.sapphire-text-field__stepper {
+  display: flex;
+  flex-direction: column;
+  justify-items: stretch;
+  padding: var(--sapphire-text-field-size-spacing-control-stepper)
+    calc(
+      var(--sapphire-text-field-size-spacing-control-stepper) +
+        var(--sapphire-text-field-size-width-border)
+    );
+  gap: var(--sapphire-text-field-size-spacing-control-stepper);
+}
+
+.sapphire-text-field:has(.sapphire-text-field__stepper)
+  .sapphire-text-field__postfix {
+  margin-right: 0;
+}
+
+.sapphire-text-field__stepper-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sapphire-text-field-size-width-stepper-l);
+
+  /* In Safari buttons get a 2px border
+   * https://github.com/necolas/normalize.css/blob/master/normalize.css#L160-L169
+   */
+  margin: 0;
+  padding: 0;
+
+  max-width: fit-content; /* When part of flex layout the button will otherwise expand to full width of container when container has flex-direction 'column' */
+  flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */
+
+  /* shape */
+  border-radius: var(
+    --sapphire-text-field-size-radius
+  ); /* same as the control */
+  border-style: solid;
+  border-width: 0;
+  border-color: transparent;
+
+  /* transition */
+  /* we don't want to transition outline-offset */
+  transition-property: opacity, background-color, color;
+  transition-duration: var(--sapphire-text-field-time-transition);
+  transition-timing-function: ease-in-out;
+  cursor: pointer;
+
+  /* color */
+  background-color: var(--sapphire-text-field-color-background-stepper-default);
+  color: var(--sapphire-text-field-color-content-stepper-default);
+}
+
+.sapphire-text-field__stepper-button:not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-text-field__stepper-button:not(:active):not(.is-active).is-hover {
+  background-color: var(--sapphire-text-field-color-background-stepper-hover);
+  color: var(--sapphire-text-field-color-content-stepper-hover);
+}
+
+.sapphire-text-field__stepper-button.is-active,
+.sapphire-text-field__stepper-button:active {
+  background-color: var(--sapphire-text-field-color-background-stepper-active);
+  color: var(--sapphire-text-field-color-content-stepper-active);
+}
+
+.sapphire-text-field--medium.sapphire-text-field__stepper-button {
+  width: var(--sapphire-text-field-size-width-stepper-m);
 }

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

@@ -4,15 +4,20 @@ declare const styles: {
   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__prefix": string;
+  readonly "sapphire-text-field__postfix": string;
+  readonly "sapphire-text-field__prefix--icon": string;
+  readonly "sapphire-text-field__postfix--icon": string;
   readonly "sapphire-text-field--resizable": string;
   readonly "sapphire-text-field__counter": string;
   readonly "sapphire-text-field__counter--error": string;
   readonly "sapphire-text-field--error": string;
   readonly "is-focus": string;
+  readonly "sapphire-text-field__stepper": string;
+  readonly "sapphire-text-field__stepper-button": string;
+  readonly "is-active": string;
+  readonly "js-hover": string;
+  readonly "is-hover": string;
 };
 export = styles;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "26.6.1",
+  "version": "27.0.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -66,7 +66,7 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^36.1.0"
+    "@danske/sapphire-design-tokens": "^37.0.0"
   },
-  "gitHead": "18d399194b252d505e09222e08996991f1a9d68a"
+  "gitHead": "e207779162338643e012a71b68cbd4d2ad5def7d"
 }