@danske/sapphire-css 16.3.0

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

@@ -0,0 +1,7 @@
+declare const styles: {
+  readonly "sapphire-contextual-help": string;
+  readonly "sapphire-contextual-help__header": string;
+  readonly "sapphire-contextual-help__footer": string;
+};
+export = styles;
+

package/components/dateField/dateField.module.css

@@ -0,0 +1,239 @@
+.sapphire-date-field {
+  display: inline-flex;
+  flex-direction: column;
+  font-family: var(--sapphire-date-field-font-name);
+  width: var(--sapphire-date-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-date-field__label {
+  display: flex;
+  align-items: center;
+  gap: var(--sapphire-date-field-size-spacing-label-horizontal);
+  min-height: var(--sapphire-date-field-size-height-label);
+  margin-bottom: var(--sapphire-date-field-size-spacing-label-vertical);
+}
+
+.sapphire-date-field__label-text {
+  font-size: var(--sapphire-date-field-size-font-label);
+  font-weight: var(--sapphire-date-field-size-font-weight-label);
+  line-height: var(--sapphire-date-field-size-line-height-label);
+  color: var(--sapphire-date-field-color-content-label);
+}
+
+.sapphire-date-field__content {
+  box-sizing: border-box;
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  gap: var(--sapphire-date-field-size-spacing-control-gap);
+  /*
+   * The right-side "clear" button column should always take space even if the
+   * button isn't there. This is to make sure the field doesn't jump when the
+   * "clear" button appears in the last column.
+   */
+  grid-template-columns: auto 1fr var(--sapphire-date-field-size-width-button);
+  height: var(--sapphire-date-field-size-height-field);
+  border-radius: var(--sapphire-date-field-size-radius-field);
+  padding: 0 var(--sapphire-date-field-size-spacing-control-horizontal);
+  border: var(--sapphire-date-field-size-width-border) solid
+    var(--sapphire-date-field-color-border-default);
+  background-color: var(--sapphire-date-field-color-background-field);
+}
+
+.sapphire-date-field__input {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  cursor: text;
+  line-height: var(--sapphire-date-field-size-line-height-content);
+  font-size: var(--sapphire-date-field-size-font-content);
+  font-weight: var(--sapphire-date-field-size-font-weight-input);
+}
+
+/**
+ * Editable segments
+ */
+.sapphire-date-field__segment {
+  padding: 0 var(--sapphire-date-field-size-spacing-segment-horizontal);
+  color: var(--sapphire-date-field-color-content-segment-placeholder);
+  border-radius: var(--sapphire-date-field-size-radius-segment);
+  transition-property: color, background-color;
+  transition-duration: var(--sapphire-date-field-time-transition);
+  transition-timing-function: ease-in-out;
+  text-align: right;
+  text-transform: uppercase;
+}
+
+.sapphire-date-field__segment:focus,
+.sapphire-date-field__segment.is-focus {
+  color: var(--sapphire-date-field-color-content-segment-selected);
+  background-color: var(--sapphire-date-field-color-background-segment);
+  outline: none;
+}
+
+.sapphire-date-field__segment::selection {
+  background-color: transparent;
+}
+
+.sapphire-date-field__segment--filled {
+  color: var(--sapphire-date-field-color-content-segment-unselected);
+}
+
+/**
+ * Note
+ */
+
+.sapphire-date-field__note-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--sapphire-date-field-size-font-note);
+  line-height: var(--sapphire-date-field-size-line-height-note);
+  color: var(--sapphire-date-field-color-content-note-default);
+  margin-top: var(--sapphire-date-field-size-spacing-note-vertical);
+}
+
+.sapphire-date-field__note {
+  display: block;
+  font-size: var(--sapphire-date-field-size-font-note);
+  line-height: var(--sapphire-date-field-size-line-height-note);
+  color: var(--sapphire-date-field-color-content-note-default);
+}
+
+.sapphire-date-field--error .sapphire-date-field__note {
+  color: var(--sapphire-date-field-color-content-note-error);
+}
+
+.sapphire-date-field--error .sapphire-date-field__content {
+  border-color: var(--sapphire-date-field-color-border-error);
+}
+
+/**
+ * Focus
+ *
+ * NOTE
+ * At the time of this writing only Firefox doesn't support :has selector by
+ * default https://caniuse.com/?search=%3Ahas
+ * But this is not a crucial aspect of the UI and we can live with this for a time.
+ */
+.sapphire-date-field__content:has(.sapphire-date-field__segment:focus),
+.sapphire-date-field__content:has(.sapphire-date-field__segment.is-focus) {
+  outline: var(--sapphire-date-field-size-focus-ring) solid
+    var(--sapphire-date-field-color-focus-ring);
+  outline-offset: calc(-1 * var(--sapphire-date-field-size-focus-ring));
+}
+
+/**
+ * Disabled
+ */
+.sapphire-date-field.is-disabled {
+  opacity: var(--sapphire-date-field-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.sapphire-date-field.is-disabled .sapphire-date-field__button,
+.sapphire-date-field.is-disabled .sapphire-date-field__input {
+  cursor: not-allowed;
+}
+
+/**
+ * Buttons (calendar and clear)
+ *
+ * These are special buttons, not matching any of our existing buttons or icon
+ * buttons and these are only meant to be used in the datefield.
+ */
+
+.sapphire-date-field__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;
+
+  /* shape */
+  border-radius: var(--sapphire-date-field-size-radius-button);
+  border-style: solid;
+  border-width: 0;
+  border-color: transparent;
+
+  /* transition */
+  /* we don't want to transition outline-offset */
+  transition-property: color;
+  transition-duration: var(--sapphire-date-field-time-transition);
+  transition-timing-function: ease-in-out;
+  cursor: pointer;
+
+  height: var(--sapphire-date-field-size-height-button);
+  width: var(--sapphire-date-field-size-width-button);
+  background-color: transparent;
+  color: var(--sapphire-date-field-color-content-button-default);
+}
+
+/**
+ * Icon (button)
+ */
+.sapphire-date-field__icon {
+  height: var(--sapphire-date-field-size-icon);
+  width: var(--sapphire-date-field-size-icon);
+}
+
+/**
+ * Hover (buttons)
+ */
+.sapphire-date-field__button:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-date-field__button:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  color: var(--sapphire-date-field-color-content-button-hover);
+}
+
+/**
+ * Focus (buttons)
+ */
+.sapphire-date-field__button:focus {
+  outline: none;
+}
+
+.sapphire-date-field__button.is-focus,
+.sapphire-date-field__button:not(.js-focus):focus-visible {
+  outline: var(--sapphire-date-field-size-focus-ring) solid
+    var(--sapphire-date-field-color-focus-ring);
+}
+
+/**
+ * Disabled (buttons)
+ */
+.sapphire-date-field__button:disabled,
+.sapphire-date-field__button.is-disabled {
+  opacity: var(--sapphire-date-field-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/**
+ * Active (buttons)
+ */
+.sapphire-date-field__button:not(:disabled):not(.is-disabled).is-active,
+.sapphire-date-field__button:not(:disabled):not(.is-disabled):active,
+.sapphire-date-field__button:not(:disabled):not(.is-disabled):focus-visible:active {
+  color: var(--sapphire-date-field-color-content-button-active);
+}

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

@@ -0,0 +1,22 @@
+declare const styles: {
+  readonly "sapphire-date-field": string;
+  readonly "sapphire-date-field__label": string;
+  readonly "sapphire-date-field__label-text": string;
+  readonly "sapphire-date-field__content": string;
+  readonly "sapphire-date-field__input": string;
+  readonly "sapphire-date-field__segment": string;
+  readonly "is-focus": string;
+  readonly "sapphire-date-field__segment--filled": string;
+  readonly "sapphire-date-field__note-row": string;
+  readonly "sapphire-date-field__note": string;
+  readonly "sapphire-date-field--error": string;
+  readonly "is-disabled": string;
+  readonly "sapphire-date-field__button": string;
+  readonly "sapphire-date-field__icon": string;
+  readonly "is-active": string;
+  readonly "js-hover": string;
+  readonly "is-hover": string;
+  readonly "js-focus": string;
+};
+export = styles;
+

package/components/dialog/dialog.module.css

@@ -0,0 +1,81 @@
+.sapphire-dialog {
+  border-radius: var(--sapphire-dialog-size-radius);
+  background-color: var(--sapphire-dialog-color-background-dialog);
+  box-sizing: border-box;
+  overflow: hidden;
+  max-height: 90vh;
+  max-width: 90vw;
+  display: flex;
+  flex-direction: column;
+  /* if implemented as focusable, we don't want the outline because this is not
+   * an an interactive element in itself */
+  outline: none;
+}
+
+.sapphire-dialog--small {
+  width: var(--sapphire-dialog-size-width-small);
+}
+
+.sapphire-dialog--medium {
+  width: var(--sapphire-dialog-size-width-medium);
+}
+
+.sapphire-dialog--large {
+  width: var(--sapphire-dialog-size-width-large);
+}
+
+.sapphire-dialog-header {
+  padding: var(--sapphire-dialog-size-spacing-header-top-default)
+    var(--sapphire-dialog-size-spacing-header-right-default)
+    var(--sapphire-dialog-size-spacing-header-bottom-default)
+    var(--sapphire-dialog-size-spacing-header-left-default);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sapphire-dialog--passive .sapphire-dialog-header {
+  padding: var(--sapphire-dialog-size-spacing-header-top-passive)
+    var(--sapphire-dialog-size-spacing-header-right-passive)
+    var(--sapphire-dialog-size-spacing-header-bottom-passive)
+    var(--sapphire-dialog-size-spacing-header-left-passive);
+}
+
+.sapphire-dialog--scrolled .sapphire-dialog-header {
+  box-shadow: 0 var(--sapphire-dialog-size-border) 0
+    var(--sapphire-dialog-color-border-scrollable);
+}
+
+.sapphire-dialog-close-button-container {
+  align-self: flex-start;
+}
+
+.sapphire-dialog-body {
+  padding: var(--sapphire-dialog-size-spacing-body-top-default)
+    var(--sapphire-dialog-size-spacing-body-right-default)
+    var(--sapphire-dialog-size-spacing-body-bottom-default)
+    var(--sapphire-dialog-size-spacing-body-left-default);
+  overflow-y: auto;
+}
+
+.sapphire-dialog--passive .sapphire-dialog-body {
+  padding: var(--sapphire-dialog-size-spacing-body-top-passive)
+    var(--sapphire-dialog-size-spacing-body-right-passive)
+    var(--sapphire-dialog-size-spacing-body-bottom-passive)
+    var(--sapphire-dialog-size-spacing-body-left-passive);
+}
+
+.sapphire-dialog-footer {
+  padding: var(--sapphire-dialog-size-spacing-footer-top-default)
+    var(--sapphire-dialog-size-spacing-footer-right-default)
+    var(--sapphire-dialog-size-spacing-footer-bottom-default)
+    var(--sapphire-dialog-size-spacing-footer-left-default);
+}
+
+.sapphire-dialog--scrollable .sapphire-dialog-footer {
+  border-top: 1px solid var(--sapphire-dialog-color-border-scrollable);
+  margin-left: var(--sapphire-dialog-size-spacing-footer-left-scrollable);
+  margin-right: var(--sapphire-dialog-size-spacing-footer-right-scrollable);
+  padding: var(--sapphire-dialog-size-spacing-footer-top-scrollable) 0
+    var(--sapphire-dialog-size-spacing-footer-bottom-scrollable) 0;
+}

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

@@ -0,0 +1,15 @@
+declare const styles: {
+  readonly "sapphire-dialog": string;
+  readonly "sapphire-dialog--small": string;
+  readonly "sapphire-dialog--medium": string;
+  readonly "sapphire-dialog--large": string;
+  readonly "sapphire-dialog-header": string;
+  readonly "sapphire-dialog--passive": string;
+  readonly "sapphire-dialog--scrolled": string;
+  readonly "sapphire-dialog-close-button-container": string;
+  readonly "sapphire-dialog-body": string;
+  readonly "sapphire-dialog-footer": string;
+  readonly "sapphire-dialog--scrollable": string;
+};
+export = styles;
+

package/components/feedbackMessage/feedbackMessage.module.css

@@ -0,0 +1,42 @@
+.sapphire-feedback-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  gap: var(--sapphire-feedback-message-size-spacing-gap);
+  max-width: var(--sapphire-feedback-message-size-max-width);
+}
+
+.sapphire-feedback-message__icon {
+  padding: var(--sapphire-feedback-message-size-spacing-icon);
+  border-radius: 100%; /* big enough value */
+  line-height: 0; /* to make sure height won't exceed width */
+}
+
+.sapphire-feedback-message__icon--success {
+  background-color: var(
+    --sapphire-feedback-message-color-background-icon-success
+  );
+  color: var(--sapphire-feedback-message-color-content-icon-success);
+}
+.sapphire-feedback-message__icon--error {
+  background-color: var(
+    --sapphire-feedback-message-color-background-icon-error
+  );
+  color: var(--sapphire-feedback-message-color-content-icon-error);
+}
+
+.sapphire-feedback-message__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: var(--sapphire-feedback-message-size-spacing-content-gap);
+}
+
+.sapphire-feedback-message__body {
+  color: var(--sapphire-feedback-message-color-content-body);
+  font-family: var(--sapphire-feedback-message-font-name);
+  line-height: var(--sapphire-feedback-message-size-line-height);
+}

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

@@ -0,0 +1,10 @@
+declare const styles: {
+  readonly "sapphire-feedback-message": string;
+  readonly "sapphire-feedback-message__icon": string;
+  readonly "sapphire-feedback-message__icon--success": string;
+  readonly "sapphire-feedback-message__icon--error": string;
+  readonly "sapphire-feedback-message__content": string;
+  readonly "sapphire-feedback-message__body": string;
+};
+export = styles;
+

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

@@ -0,0 +1,17 @@
+declare const styles: {
+  readonly "sapphire-field": string;
+  readonly "sapphire-field__label": string;
+  readonly "sapphire-field__control": string;
+  readonly "sapphire-field__control--group": string;
+  readonly "sapphire-field--no-shrink": string;
+  readonly "sapphire-field__message": string;
+  readonly "sapphire-field__note-row": string;
+  readonly "sapphire-field--medium": string;
+  readonly "sapphire-field__note": string;
+  readonly "sapphire-field--error": string;
+  readonly "is-disabled": string;
+  readonly "sapphire-field--label-placement-side": string;
+  readonly "sapphire-fieldset": string;
+};
+export = styles;
+

package/components/fieldGroup/fieldGroup.module.css

@@ -0,0 +1,64 @@
+.sapphire-fieldGroup-label-container {
+  /* 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;
+
+  display: flex;
+  align-items: center;
+  gap: var(--sapphire-field-group-size-spacing-heading-horizontal);
+  margin-bottom: var(--sapphire-field-group-size-spacing-heading-vertical);
+}
+
+.sapphire-fieldGroup-label-text {
+  font-family: var(--sapphire-field-group-font-heading-name);
+  font-weight: var(--sapphire-field-group-font-heading-weight);
+  font-size: var(--sapphire-field-group-size-font-default);
+  line-height: var(--sapphire-field-group-size-line-height);
+  color: var(--sapphire-field-group-color-label);
+}
+
+.sapphire-fieldGroup-label-text--disabled {
+  opacity: var(--sapphire-radio-opacity-disabled);
+}
+
+.sapphire-fieldGroup-content {
+  display: flex;
+}
+
+.sapphire-fieldGroup-content--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.sapphire-fieldGroup-content--horizontal
+  .sapphire-fieldGroup-field:not(:last-child) {
+  margin-right: var(--sapphire-field-group-size-spacing-field-horizontal);
+}
+
+.sapphire-fieldGroup-content--vertical {
+  flex-direction: column;
+}
+
+.sapphire-fieldGroup-content--vertical
+  .sapphire-fieldGroup-field:not(:last-child) {
+  margin-bottom: var(--sapphire-field-group-size-spacing-field-vertical);
+}
+
+.sapphire-fieldGroup-error-text {
+  display: block;
+  font-family: var(--sapphire-field-group-font-heading-name);
+  font-weight: var(--sapphire-field-group-font-error-text-weight);
+  font-size: var(--sapphire-field-group-size-font-error-text);
+  margin-top: var(--sapphire-field-group-size-spacing-error-text-vertical);
+  color: var(--sapphire-field-group-color-error-text);
+}

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

@@ -0,0 +1,12 @@
+declare const styles: {
+  readonly "sapphire-fieldGroup-label-container": string;
+  readonly "sapphire-fieldGroup-label-text": string;
+  readonly "sapphire-fieldGroup-label-text--disabled": string;
+  readonly "sapphire-fieldGroup-content": string;
+  readonly "sapphire-fieldGroup-content--horizontal": string;
+  readonly "sapphire-fieldGroup-field": string;
+  readonly "sapphire-fieldGroup-content--vertical": string;
+  readonly "sapphire-fieldGroup-error-text": string;
+};
+export = styles;
+

package/components/heading/heading.module.css

@@ -0,0 +1,143 @@
+.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-heading-size-line-height);
+
+  /* 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-heading-font-name-default-level1);
+  font-weight: var(--sapphire-heading-font-weight-default-level1);
+  font-size: var(--sapphire-heading-size-font-level1);
+  text-transform: var(--sapphire-heading-font-text-transform-default-level1);
+  letter-spacing: var(--sapphire-heading-font-letter-spacing-default-level1);
+  color: var(--sapphire-heading-color-text-level1);
+}
+
+.sapphire-heading--level2 {
+  font-family: var(--sapphire-heading-font-name-default-level2);
+  font-weight: var(--sapphire-heading-font-weight-default-level2);
+  font-size: var(--sapphire-heading-size-font-level2);
+  text-transform: var(--sapphire-heading-font-text-transform-default-level2);
+  letter-spacing: var(--sapphire-heading-font-letter-spacing-default-level2);
+  color: var(--sapphire-heading-color-text-level2);
+}
+
+.sapphire-heading--level3 {
+  font-family: var(--sapphire-heading-font-name-default-level3);
+  font-weight: var(--sapphire-heading-font-weight-default-level3);
+  font-size: var(--sapphire-heading-size-font-level3);
+  text-transform: var(--sapphire-heading-font-text-transform-default-level3);
+  letter-spacing: var(--sapphire-heading-font-letter-spacing-default-level3);
+  color: var(--sapphire-heading-color-text-level3);
+}
+
+.sapphire-heading--level4 {
+  font-family: var(--sapphire-heading-font-name-default-level4);
+  font-weight: var(--sapphire-heading-font-weight-default-level4);
+  font-size: var(--sapphire-heading-size-font-level4);
+  text-transform: var(--sapphire-heading-font-text-transform-default-level4);
+  letter-spacing: var(--sapphire-heading-font-letter-spacing-default-level4);
+  color: var(--sapphire-heading-color-text-level4);
+}
+
+.sapphire-heading--level5 {
+  font-family: var(--sapphire-heading-font-name-default-level5);
+  font-weight: var(--sapphire-heading-font-weight-default-level5);
+  font-size: var(--sapphire-heading-size-font-level5);
+  text-transform: var(--sapphire-heading-font-text-transform-default-level5);
+  letter-spacing: var(--sapphire-heading-font-letter-spacing-default-level5);
+  color: var(--sapphire-heading-color-text-level5);
+}
+
+.sapphire-heading--level6 {
+  font-family: var(--sapphire-heading-font-name-default-level6);
+  font-weight: var(--sapphire-heading-font-weight-default-level6);
+  font-size: var(--sapphire-heading-size-font-level6);
+  text-transform: var(--sapphire-heading-font-text-transform-default-level6);
+  letter-spacing: var(--sapphire-heading-font-letter-spacing-default-level6);
+  color: var(--sapphire-heading-color-text-level6);
+}
+
+.sapphire-heading--level1.sapphire-heading--alternative {
+  font-family: var(--sapphire-heading-font-name-alternative-level1);
+  font-weight: var(--sapphire-heading-font-weight-alternative-level1);
+  text-transform: var(
+    --sapphire-heading-font-text-transform-alternative-level1
+  );
+  letter-spacing: var(
+    --sapphire-heading-font-letter-spacing-alternative-level1
+  );
+}
+
+.sapphire-heading--level2.sapphire-heading--alternative {
+  font-family: var(--sapphire-heading-font-name-alternative-level2);
+  font-weight: var(--sapphire-heading-font-weight-alternative-level2);
+  text-transform: var(
+    --sapphire-heading-font-text-transform-alternative-level2
+  );
+  letter-spacing: var(
+    --sapphire-heading-font-letter-spacing-alternative-level2
+  );
+}
+
+.sapphire-heading--level3.sapphire-heading--alternative {
+  font-family: var(--sapphire-heading-font-name-alternative-level3);
+  font-weight: var(--sapphire-heading-font-weight-alternative-level3);
+  text-transform: var(
+    --sapphire-heading-font-text-transform-alternative-level3
+  );
+  letter-spacing: var(
+    --sapphire-heading-font-letter-spacing-alternative-level3
+  );
+}
+
+.sapphire-heading--level4.sapphire-heading--alternative {
+  font-family: var(--sapphire-heading-font-name-alternative-level4);
+  font-weight: var(--sapphire-heading-font-weight-alternative-level4);
+  text-transform: var(
+    --sapphire-heading-font-text-transform-alternative-level4
+  );
+  letter-spacing: var(
+    --sapphire-heading-font-letter-spacing-alternative-level4
+  );
+}
+
+.sapphire-heading--level5.sapphire-heading--alternative {
+  font-family: var(--sapphire-heading-font-name-alternative-level5);
+  font-weight: var(--sapphire-heading-font-weight-alternative-level5);
+  text-transform: var(
+    --sapphire-heading-font-text-transform-alternative-level5
+  );
+  letter-spacing: var(
+    --sapphire-heading-font-letter-spacing-alternative-level5
+  );
+}
+
+.sapphire-heading--level6.sapphire-heading--alternative {
+  font-family: var(--sapphire-heading-font-name-alternative-level6);
+  font-weight: var(--sapphire-heading-font-weight-alternative-level6);
+  text-transform: var(
+    --sapphire-heading-font-text-transform-alternative-level6
+  );
+  letter-spacing: var(
+    --sapphire-heading-font-letter-spacing-alternative-level6
+  );
+}

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

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

package/components/icon/icon.module.css

@@ -0,0 +1,14 @@
+.sapphire-icon.sapphire-icon--small {
+  height: var(--sapphire-icon-size-small);
+  width: var(--sapphire-icon-size-small);
+}
+
+.sapphire-icon.sapphire-icon--medium {
+  height: var(--sapphire-icon-size-medium);
+  width: var(--sapphire-icon-size-medium);
+}
+
+.sapphire-icon.sapphire-icon--large {
+  height: var(--sapphire-icon-size-large);
+  width: var(--sapphire-icon-size-large);
+}