@danske/sapphire-css 39.0.1 → 40.0.0

package/components/textField/textField.module.css

@@ -8,11 +8,11 @@
   align-items: center;
   border-radius: var(--sapphire-semantic-size-radius-sm);
   cursor: text;
-  color: var(--sapphire-semantic-color-content-default-primary);
-  background-color: var(--sapphire-semantic-color-background-field-default);
-  height: var(--sapphire-semantic-size-height-input-lg);
+  color: var(--sapphire-semantic-color-foreground-primary);
+  background: var(--sapphire-semantic-color-background-field);
+  height: var(--sapphire-semantic-size-height-control-lg);
   font-family: var(--sapphire-semantic-font-name-default);
-  font-size: var(--sapphire-semantic-size-font-control-default);
+  font-size: var(--sapphire-semantic-size-font-control-lg);
   /* 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
@@ -29,7 +29,7 @@
 }
 
 .sapphire-text-field--md {
-  height: var(--sapphire-semantic-size-height-input-md);
+  height: var(--sapphire-semantic-size-height-control-md);
   font-size: var(--sapphire-semantic-size-font-control-md);
 }
 
@@ -45,10 +45,9 @@
   font-size: inherit;
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
 
-  caret-color: var(--sapphire-semantic-color-cursor-default);
   color: inherit;
 
-  background-color: transparent;
+  background: transparent;
   border: none;
   outline: none;
 }
@@ -62,7 +61,7 @@
  */
 .sapphire-text-field__input::placeholder {
   opacity: 1; /* some browsers set a lower than 1 opacity */
-  color: var(--sapphire-semantic-color-content-default-secondary);
+  color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
 /**
@@ -77,7 +76,10 @@
  * (this supports a prefix/postfix)
  */
 .sapphire-text-field:not(.sapphire-text-field--multiline) {
-  gap: var(--sapphire-semantic-size-spacing-20);
+  gap: var(--sapphire-semantic-size-spacing-sm);
+}
+.sapphire-text-field--md:not(.sapphire-text-field--multiline) {
+  gap: var(--sapphire-semantic-size-spacing-xs);
 }
 
 /**
@@ -90,7 +92,7 @@
 }
 
 .sapphire-text-field .sapphire-text-field__prefix {
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-secondary);
   flex-shrink: 0;
   z-index: 1;
   margin-left: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
@@ -110,7 +112,7 @@
 }
 
 .sapphire-text-field .sapphire-text-field__postfix {
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-secondary);
   flex-shrink: 0;
   z-index: 1;
   margin-right: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
@@ -126,14 +128,14 @@
 
 .sapphire-text-field .sapphire-text-field__prefix--icon,
 .sapphire-text-field .sapphire-text-field__postfix--icon {
-  width: var(--sapphire-semantic-size-icon-lg);
-  height: var(--sapphire-semantic-size-icon-lg);
+  width: var(--sapphire-semantic-size-icon-md);
+  height: var(--sapphire-semantic-size-icon-md);
 }
 
 .sapphire-text-field--md .sapphire-text-field__prefix--icon,
 .sapphire-text-field--md .sapphire-text-field__postfix--icon {
-  width: var(--sapphire-semantic-size-icon-md);
-  height: var(--sapphire-semantic-size-icon-md);
+  width: var(--sapphire-semantic-size-icon-sm);
+  height: var(--sapphire-semantic-size-icon-sm);
 }
 
 /**
@@ -176,18 +178,30 @@
 }
 
 .sapphire-text-field__counter {
-  color: var(--sapphire-semantic-color-content-default-secondary);
-  padding-left: var(--sapphire-semantic-size-spacing-20);
+  color: var(--sapphire-semantic-color-foreground-secondary);
   margin-left: auto;
 }
 
 .sapphire-text-field__counter--error {
-  color: var(--sapphire-semantic-color-content-negative-secondary-default);
+  color: var(--sapphire-semantic-color-foreground-negative);
 }
 
 .sapphire-text-field--error {
   outline: solid var(--sapphire-semantic-size-border-sm)
-    var(--sapphire-semantic-color-border-field-error);
+    var(--sapphire-semantic-color-border-negative-default);
+}
+
+/**
+ * Hover
+ */
+.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(
+    .is-focus
+  ):not(:focus-within).is-hover,
+.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(
+    .is-focus
+  ):not(:focus-within):not(.js-hover):hover {
+  outline: solid var(--sapphire-semantic-size-border-sm)
+    var(--sapphire-semantic-color-border-field-hover);
 }
 
 /**
@@ -209,7 +223,7 @@
   * Fixes the state when the field is focused and the user is hovering
   * or focusing on the list of browser autofilling suggestions.
   */
-  box-shadow: 0 0 0 var(--sapphire-semantic-size-height-input-lg) inset
+  box-shadow: 0 0 0 var(--sapphire-semantic-size-height-control-lg) inset
     var(--sapphire-semantic-color-background-surface) !important;
 }
 
@@ -222,12 +236,12 @@
   display: flex;
   flex-direction: column;
   justify-items: stretch;
-  padding: var(--sapphire-semantic-size-spacing-5)
+  padding: var(--sapphire-semantic-size-spacing-4xs)
     calc(
-      var(--sapphire-semantic-size-spacing-5) +
+      var(--sapphire-semantic-size-spacing-4xs) +
         var(--sapphire-semantic-size-border-sm)
     );
-  gap: var(--sapphire-semantic-size-spacing-5);
+  gap: var(--sapphire-semantic-size-spacing-4xs);
 }
 
 .sapphire-text-field:has(.sapphire-text-field__stepper)
@@ -262,32 +276,28 @@
   /* we don't want to transition outline-offset */
   transition-property: opacity, background-color, color;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
-  transition-timing-function: ease-in-out;
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
   cursor: pointer;
 
   /* color */
-  background-color: var(
-    --sapphire-semantic-color-background-action-tertiary-default
+  background: var(
+    --sapphire-semantic-color-background-action-secondary-default
   );
-  color: var(--sapphire-semantic-color-content-action-tertiary-default);
+  color: var(--sapphire-semantic-color-foreground-action-on-secondary-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-semantic-color-background-action-tertiary-hover
-  );
-  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
+  background: var(--sapphire-semantic-color-background-action-secondary-hover);
+  color: var(--sapphire-semantic-color-foreground-action-on-secondary-hover);
 }
 
 .sapphire-text-field__stepper-button.is-active,
 .sapphire-text-field__stepper-button:active {
-  background-color: var(
-    --sapphire-semantic-color-background-action-tertiary-active
-  );
-  color: var(--sapphire-semantic-color-content-action-tertiary-active);
+  background: var(--sapphire-semantic-color-background-action-secondary-active);
+  color: var(--sapphire-semantic-color-foreground-action-on-secondary-active);
 }
 
 .sapphire-text-field--md.sapphire-text-field__stepper-button {

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

@@ -13,11 +13,11 @@ declare const styles: {
   readonly "sapphire-text-field__counter--error": string;
   readonly "sapphire-text-field--error": string;
   readonly "is-focus": string;
+  readonly "is-hover": string;
+  readonly "js-hover": 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/components/toast/toast.module.css

@@ -36,23 +36,23 @@
   --sapphire-toast-horizontal-transform: -50%;
   bottom: 0;
   left: 50%;
-  margin-bottom: var(--sapphire-semantic-size-spacing-40);
+  margin-bottom: var(--sapphire-semantic-size-spacing-md);
 }
 
 .sapphire-toast-container--bottom-left {
   --sapphire-toast-horizontal-transform: 0%;
   bottom: 0;
   left: 0;
-  margin-bottom: var(--sapphire-semantic-size-spacing-40);
-  margin-left: var(--sapphire-semantic-size-spacing-40);
+  margin-bottom: var(--sapphire-semantic-size-spacing-md);
+  margin-left: var(--sapphire-semantic-size-spacing-md);
 }
 
 .sapphire-toast-container--bottom-right {
   --sapphire-toast-horizontal-transform: 0%;
   bottom: 0;
   right: 0;
-  margin-bottom: var(--sapphire-semantic-size-spacing-40);
-  margin-right: var(--sapphire-semantic-size-spacing-40);
+  margin-bottom: var(--sapphire-semantic-size-spacing-md);
+  margin-right: var(--sapphire-semantic-size-spacing-md);
 }
 
 .sapphire-toast-container--top {
@@ -60,7 +60,7 @@
   --sapphire-toast-horizontal-transform: -50%;
   top: 0;
   left: 50%;
-  margin-top: var(--sapphire-semantic-size-spacing-40);
+  margin-top: var(--sapphire-semantic-size-spacing-md);
 }
 
 .sapphire-toast-container--top-left {
@@ -68,8 +68,8 @@
   --sapphire-toast-horizontal-transform: 0%;
   top: 0;
   left: 0;
-  margin-top: var(--sapphire-semantic-size-spacing-40);
-  margin-left: var(--sapphire-semantic-size-spacing-40);
+  margin-top: var(--sapphire-semantic-size-spacing-md);
+  margin-left: var(--sapphire-semantic-size-spacing-md);
 }
 
 .sapphire-toast-container--top-right {
@@ -77,8 +77,8 @@
   --sapphire-toast-horizontal-transform: 0%;
   top: 0;
   right: 0;
-  margin-top: var(--sapphire-semantic-size-spacing-40);
-  margin-right: var(--sapphire-semantic-size-spacing-40);
+  margin-top: var(--sapphire-semantic-size-spacing-md);
+  margin-right: var(--sapphire-semantic-size-spacing-md);
 }
 
 /************************************************************/
@@ -96,12 +96,10 @@
   overflow: hidden;
   max-width: var(--sapphire-global-size-generic-1400);
   min-width: var(--sapphire-global-size-generic-750);
-  box-shadow: var(--sapphire-global-shadow-sm);
-  border-radius: var(--sapphire-semantic-size-radius-popover);
+  border-radius: var(--sapphire-semantic-size-radius-lg);
   animation-duration: var(--sapphire-semantic-time-motion-default);
 
-  /* Ease-out Cubic */
-  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
+  animation-timing-function: var(--sapphire-semantic-transitions-fade);
 
   /* if implemented as focusable, we don't want the outline because this is not
      * an an interactive element in itself */
@@ -142,160 +140,42 @@
 
 .sapphire-toast__content {
   display: flex;
-  gap: var(--sapphire-semantic-size-spacing-20);
-  align-items: center;
+  gap: var(--sapphire-semantic-size-spacing-xs);
+  /* align-items: center; */
   justify-content: space-between;
 
   overflow-wrap: anywhere;
-  background-color: var(--sapphire-semantic-color-background-surface);
-  color: var(--sapphire-semantic-color-content-default-primary);
+  background: var(--sapphire-semantic-color-background-surface);
+  color: var(--sapphire-semantic-color-foreground-primary);
   font-family: var(--sapphire-semantic-font-name-default);
-  font-size: var(--sapphire-global-size-font-88);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-semantic-size-font-body-sm);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
   line-height: var(--sapphire-semantic-size-line-height-md);
-  padding: var(--sapphire-semantic-size-spacing-20)
-    var(--sapphire-semantic-size-spacing-40);
-  padding-right: var(--sapphire-semantic-size-spacing-20);
+  padding: var(--sapphire-semantic-size-spacing-sm);
 }
 
-.sapphire-toast__content--success {
-  background-color: var(
-    --sapphire-semantic-color-background-positive-primary-default
-  );
-}
-
-.sapphire-toast__title--with-icon {
+.sapphire-toast__text-content {
+  display: flex;
+  flex-direction: column;
   flex: 1;
-}
-
-/**
- * Close Button
- *
- * This is a special button, not matching any of our existing buttons or icon
- * buttons and these are only meant to be used in the toast component.
- */
-
-.sapphire-toast__close-button {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
   justify-content: center;
-  vertical-align: middle;
-  white-space: nowrap;
-
-  /* In Safari buttons get a 2px border
-     * https://github.com/necolas/normalize.css/blob/master/normalize.css#L160-L169
-     */
-  margin: 0;
-  padding: 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;
-
-  /* sizing */
-  height: var(--sapphire-semantic-size-height-control-sm);
-  width: var(--sapphire-semantic-size-height-control-sm);
-  flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */
-
-  /* shape */
-  border-radius: var(--sapphire-semantic-size-height-control-sm);
-  border-style: solid;
-  border-width: 0;
-  border-color: transparent;
-
-  /* transition */
-  /* we don't want to transition outline-offset */
-  transition-property: opacity, background-color, color;
-  animation-duration: var(--sapphire-semantic-time-motion-default);
-  transition-timing-function: ease-in-out;
-  cursor: pointer;
-
-  background-color: var(
-    --sapphire-semantic-color-background-action-tertiary-ghost-default
-  );
-  color: var(--sapphire-semantic-color-content-action-tertiary-default);
+  padding: var(--sapphire-semantic-size-spacing-2xs);
 }
 
-/**
- * Hover (button)
- */
-.sapphire-toast__close-button:not(:disabled):not(:active):not(.is-active):not(
-    .js-hover
-  ):hover,
-.sapphire-toast__close-button:not(:disabled):not(:active):not(
-    .is-active
-  ).is-hover {
-  background-color: var(
-    --sapphire-semantic-color-background-action-tertiary-ghost-hover
-  );
-  color: var(--sapphire-semantic-color-content-action-tertiary-default);
+.sapphire-toast__text-content > :nth-child(1 of :not(:only-child)) {
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
 }
 
-/**
- * Focus (button)
- */
-.sapphire-toast__close-button:focus {
-  outline: none;
-}
-
-.sapphire-toast__close-button.is-focus,
-.sapphire-toast__close-button:not(.js-focus):focus-visible {
-  background-color: var(
-    --sapphire-semantic-color-background-action-tertiary-ghost-default
-  );
-}
-
-/**
- * Active (button)
- */
-.sapphire-toast__close-button:not(:disabled).is-active,
-.sapphire-toast__close-button:not(:disabled):active,
-.sapphire-toast__close-button:not(:disabled):focus-visible:active {
-  background-color: var(
-    --sapphire-semantic-color-background-action-tertiary-ghost-active
-  );
-  color: var(--sapphire-semantic-color-content-action-tertiary-active);
+.sapphire-toast__content--success {
+  background: var(--sapphire-semantic-color-background-positive);
+  color: var(--sapphire-semantic-color-foreground-on-positive);
 }
 
-/**
-* Success styles
- */
-
-/**
- * Hover (button)
- */
-.sapphire-toast__content--success
-  .sapphire-toast__close-button:not(:disabled):not(:active):not(.is-active):not(
-    .js-hover
-  ):hover,
-.sapphire-toast__content--success
-  .sapphire-toast__close-button:not(:disabled):not(:active):not(
-    .is-active
-  ).is-hover {
-  background-color: var(--sapphire-global-color-green-400);
-  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
+.sapphire-toast__content--error {
+  background: var(--sapphire-semantic-color-background-negative);
+  color: var(--sapphire-semantic-color-foreground-on-negative);
 }
 
-/**
- * Active (button)
- */
-.sapphire-toast__content--success
-  .sapphire-toast__close-button:not(:disabled).is-active,
-.sapphire-toast__content--success
-  .sapphire-toast__close-button:not(:disabled):active,
-.sapphire-toast__content--success
-  .sapphire-toast__close-button:not(:disabled):focus-visible:active {
-  background-color: var(--sapphire-global-color-green-300);
-  color: var(--sapphire-semantic-color-content-action-tertiary-active);
+.sapphire-toast__title--with-icon {
+  flex: 1;
 }

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

@@ -13,14 +13,10 @@ declare const styles: {
   readonly "sapphire-toast--exiting": string;
   readonly "fade-out": string;
   readonly "sapphire-toast__content": string;
+  readonly "sapphire-toast__text-content": string;
   readonly "sapphire-toast__content--success": string;
+  readonly "sapphire-toast__content--error": string;
   readonly "sapphire-toast__title--with-icon": string;
-  readonly "sapphire-toast__close-button": string;
-  readonly "is-active": string;
-  readonly "js-hover": string;
-  readonly "is-hover": string;
-  readonly "is-focus": string;
-  readonly "js-focus": string;
 };
 export = styles;
 

package/components/tooltip/tooltip.module.css

@@ -18,7 +18,8 @@
    * an an interactive element in itself */
   outline: none;
 
-  animation: fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;
+  animation: fade-in var(--sapphire-semantic-time-fade-quick)
+    var(--sapphire-semantic-transitions-fade);
 
   /* 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
@@ -36,12 +37,12 @@
 }
 
 .sapphire-tooltip__content {
-  background-color: var(--sapphire-semantic-color-background-surface);
-  color: var(--sapphire-semantic-color-content-default-primary);
+  background: var(--sapphire-semantic-color-background-surface);
+  color: var(--sapphire-semantic-color-foreground-primary);
   font-family: var(--sapphire-semantic-font-name-default);
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
-  font-size: var(--sapphire-global-size-font-88);
+  font-size: var(--sapphire-semantic-size-font-body-sm);
   line-height: var(--sapphire-semantic-size-line-height-md);
-  padding: var(--sapphire-semantic-size-spacing-10)
-    var(--sapphire-semantic-size-spacing-20);
+  padding: var(--sapphire-semantic-size-spacing-3xs)
+    var(--sapphire-semantic-size-spacing-xs);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "39.0.1",
+  "version": "40.0.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -45,7 +45,7 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@danske/sapphire-icons": "^2.4.0",
+    "@danske/sapphire-icons": "^3.0.0",
     "@danske/sapphire-react": "^4.3.0",
     "@mdx-js/react": "^1.6.22",
     "@storybook/addon-essentials": "^6.5.13",
@@ -67,7 +67,7 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^41.5.0"
+    "@danske/sapphire-design-tokens": "^42.0.0"
   },
-  "gitHead": "f00bdba843f4fd78fe08ad19075e35f11d6ed695"
+  "gitHead": "09163d6ba43ad1cb4eef0f62060664840493fd01"
 }

package/themes/default-dark.js

@@ -7,6 +7,7 @@ require("@danske/sapphire-design-tokens/build/themes/default-dark/assets/fonts/d
 var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-tokens/build/themes/default-dark/css/tokens.module.css"));
 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']
 };
 exports["default"] = theme;

package/themes/default.js

@@ -8,6 +8,7 @@ var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-token
 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']
 };
 exports["default"] = theme;

package/themes/index.d.ts

@@ -2,5 +2,6 @@ export { default as tokens } from '@danske/sapphire-design-tokens/build/themes';
 export interface Theme {
     themeClassName: string;
     themeSecondaryModifierClassName?: string;
+    themeTertiaryModifierClassName?: string;
     themeContrastModifierClassName?: string;
 }

package/components/heading/heading.module.css

@@ -1,95 +0,0 @@
-.sapphire-heading {
-  /* not able to find specification in sketch docs for margin,
-     will update this once specifications are established */
-  margin-top: 0px;
-  margin-bottom: 0px;
-
-  line-height: var(--sapphire-global-size-line-height-sm);
-
-  /* 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;
-}
-
-/* heading levels */
-.sapphire-heading--level1 {
-  font-family: var(--sapphire-semantic-font-name-default);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
-  font-size: var(--sapphire-global-size-font-220);
-  color: var(--sapphire-semantic-color-content-default-primary);
-}
-
-.sapphire-heading--level2 {
-  font-family: var(--sapphire-semantic-font-name-default);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
-  font-size: var(--sapphire-global-size-font-150);
-  color: var(--sapphire-semantic-color-content-default-primary);
-}
-
-.sapphire-heading--level3 {
-  font-family: var(--sapphire-semantic-font-name-default);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
-  font-size: var(--sapphire-global-size-font-130);
-  color: var(--sapphire-semantic-color-content-default-primary);
-}
-
-.sapphire-heading--level4 {
-  font-family: var(--sapphire-semantic-font-name-default);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
-  font-size: var(--sapphire-global-size-font-112);
-  color: var(--sapphire-semantic-color-content-default-primary);
-}
-
-.sapphire-heading--level5 {
-  font-family: var(--sapphire-semantic-font-name-default);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
-  font-size: var(--sapphire-global-size-font-106);
-  color: var(--sapphire-semantic-color-content-default-primary);
-}
-
-.sapphire-heading--level6 {
-  font-family: var(--sapphire-semantic-font-name-default);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
-  font-size: var(--sapphire-global-size-font-100);
-  color: var(--sapphire-semantic-color-content-default-primary);
-}
-
-.sapphire-heading--level1.sapphire-heading--alternative {
-  font-family: var(--sapphire-semantic-font-name-display);
-  font-weight: var(--sapphire-semantic-font-weight-default-regular);
-}
-
-.sapphire-heading--level2.sapphire-heading--alternative {
-  font-family: var(--sapphire-semantic-font-name-display);
-  font-weight: var(--sapphire-semantic-font-weight-default-regular);
-}
-
-.sapphire-heading--level3.sapphire-heading--alternative {
-  font-family: var(--sapphire-semantic-font-name-display);
-  font-weight: var(--sapphire-semantic-font-weight-default-regular);
-}
-
-.sapphire-heading--level4.sapphire-heading--alternative {
-  font-family: var(--sapphire-semantic-font-name-display);
-  font-weight: var(--sapphire-semantic-font-weight-default-regular);
-}
-
-.sapphire-heading--level5.sapphire-heading--alternative {
-  font-family: var(--sapphire-semantic-font-name-display);
-  font-weight: var(--sapphire-semantic-font-weight-default-regular);
-}
-
-.sapphire-heading--level6.sapphire-heading--alternative {
-  font-family: var(--sapphire-semantic-font-name-display);
-  font-weight: var(--sapphire-semantic-font-weight-default-regular);
-}

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

@@ -1,12 +0,0 @@
-declare const styles: {
-  readonly "sapphire-heading": string;
-  readonly "sapphire-heading--level1": string;
-  readonly "sapphire-heading--level2": string;
-  readonly "sapphire-heading--level3": string;
-  readonly "sapphire-heading--level4": string;
-  readonly "sapphire-heading--level5": string;
-  readonly "sapphire-heading--level6": string;
-  readonly "sapphire-heading--alternative": string;
-};
-export = styles;
-