@miljodirektoratet/md-css 6.16.0 → 6.22.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-css",
-  "version": "6.16.0",
+  "version": "6.22.2",
   "description": "CSS for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./src/index.css",

package/src/accordionitem/accordionitem.css

@@ -40,7 +40,7 @@
   background-color: transparent;
 }
 
-/* Header */
+/* HEADER */
 .md-accordion-item__header {
   display: flex;
   justify-content: space-between;

package/src/button/button.css

@@ -12,6 +12,7 @@
   border: none;
   transition: all 200ms ease-in-out;
   line-height: 1.5;
+  text-decoration: none !important;
 }
 
 .md-button--column {
@@ -213,7 +214,7 @@
   background-color: var(--md-color-attention-error-primary-active);
 }
 
-/* Danger secondary */
+/* DANGER SECONDARY */
 .md-button--danger-secondary {
   background-color: var(--md-color-attention-error-secondary);
   border: var(--md-size-2) solid var(--md-color-attention-error-primary);
@@ -262,7 +263,7 @@
   color: var(--md-color-text-disabled);
 }
 
-/* Danger tertiary */
+/* DANGER TERTIARY */
 .md-button--danger-tertiary {
   background-color: transparent;
   border: none;

package/src/formElements/combobox/combobox.css

@@ -3,7 +3,6 @@
   width: 100%;
 }
 
-/* Label */
 .md-combobox__label-wrapper {
   margin-bottom: var(--md-size-8);
 }

package/src/help/help.css

@@ -1,4 +1,3 @@
-/* HELP BUTTON */
 .md-helpbutton {
   display: flex;
   align-items: center;
@@ -44,7 +43,6 @@
   fill: var(--md-color-cta-primary-focus);
 }
 
-/* HELP TEXT */
 .md-helptext {
   font-family: var(--md-typography-family-body);
   font-size: var(--md-typography-size-14);

package/src/index.css

@@ -32,6 +32,7 @@
 @import './tile/tile.css';
 @import './toggle/toggle.css';
 @import './tooltip/tooltip.css';
+@import './tag/tag.css';
 
 html {
   box-sizing: border-box;

package/src/link/link.css

@@ -1,4 +1,4 @@
-.md-link {
+.md-link:not(.md-button) {
   display: inline-flex;
   align-items: center;
   gap: var(--md-size-4);
@@ -13,26 +13,26 @@
   padding: var(--md-size-2) var(--md-size-1);
 }
 
-.md-link__icon {
+.md-link__icon:not(.md-button) {
   height: var(--md-size-20);
   width: var(--md-size-20);
 }
 
-.md-link:hover {
+.md-link:not(.md-button):hover {
   color: var(--md-color-cta-primary-hover);
   text-decoration-thickness: 0.0938rem;
   text-decoration-color: var(--md-color-cta-primary-hover);
 }
 
-.md-link:focus-visible {
+.md-link:not(.md-button):focus-visible {
   color: var(--md-color-cta-primary-focus);
   outline: var(--md-size-1) solid var(--md-color-border-tertiary);
 }
 
-.md-link:active {
+.md-link:not(.md-button):active {
   background-color: var(--md-color-surface-primary);
 }
 
-.md-link:visited {
+.md-link:not(.md-button):visited {
   color: var(--md-color-text-visited);
 }

package/src/tabs/tabs.css

@@ -83,7 +83,7 @@
   display: flex;
 }
 
-/* Compact tabs */
+/* COMPACT TABS */
 .md-tabs-container.md-tabs__compact .md-tabs-list {
   gap: 0;
   flex-wrap: nowrap;

package/src/tag/README.md

@@ -0,0 +1,18 @@
+# Structure
+
+To use the `Tag` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
+
+Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
+
+See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
+
+```html
+<div class="md-tag [md-tag-theme--primary, md-tag-theme--secondary, md-tag-theme--success, md-tag-theme--warning, md-tag-theme--info, md-tag-theme--error,  md-tag-type--base, md-tag-type--light, md-tag-type--outline]">
+  <div className='md-tag-icon'>
+      {icon}
+  </div>
+  <div>
+    {label}
+  </div>
+</div>
+```

package/src/tag/tag.css

@@ -0,0 +1,142 @@
+.md-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: auto;
+  height: 32px;
+  padding: 2px 8px;
+  line-height: 1;
+
+  border-radius: var(--md-radius-sm);
+  font-family: var(--md-typography-family-label);
+  font-size: var(--md-typography-size-14);
+  font-weight: var(--md-typography-weight-regular);
+
+  border: 1px solid var(--md-color-green-10);
+  background-color: var(--md-color-green-10);
+  color: var(--md-color-grey-white);
+}
+
+.md-tag * {
+  flex: 0 0 auto;  
+}
+
+.md-tag-icon {
+  width: 24px;
+  height: 24px;
+}
+
+/* Primary */
+.md-tag.md-tag-theme--primary {
+  border-color: var(--md-color-green-10);
+  background-color: var(--md-color-green-10);
+  color: var(--md-color-grey-white);
+}
+
+.md-tag.md-tag-theme--primary.md-tag-type--light{
+  border-color: var(--md-color-surface-primary-tinted);
+  background-color: var(--md-color-surface-primary-tinted);
+  color: var(--md-color-text-primary);
+}
+
+.md-tag.md-tag-theme--primary.md-tag-type--outline{
+  border-color: var(--md-color-border-tertiary);
+  background-color: var(--md-color-surface-primary-tinted);
+  color: var(--md-color-text-primary);
+}
+
+/* Secondary */
+.md-tag.md-tag-theme--secondary {
+  border-color: var(--md-color-surface-secondary-dark);
+  background-color: var(--md-color-surface-secondary-dark);
+  color: var(--md-color-text-primary);
+}
+
+.md-tag.md-tag-theme--secondary.md-tag-type--light {
+  border-color: var(--md-color-surface-secondary-dark);
+  background-color: var(--md-color-surface-secondary-dark);
+  color: var(--md-color-text-primary);
+}
+
+.md-tag.md-tag-theme--secondary.md-tag-type--outline {
+  border-color: var(--md-color-surface-secondary-border);
+  background-color: var(--md-color-surface-secondary-dark);
+  color: var(--md-color-text-primary);
+}
+
+/* Success */
+.md-tag.md-tag-theme--success {
+  border-color: var(--md-color-attention-success-primary);
+  background-color: var(--md-color-attention-success-primary);
+  color: var(--md-color-grey-white);
+}
+
+.md-tag.md-tag-theme--success.md-tag-type--light {
+  border-color: var(--md-color-attention-success-surface-tinted);
+  background-color: var(--md-color-attention-success-surface-tinted);
+  color: var(--md-color-text-primary);
+} 
+
+.md-tag.md-tag-theme--success.md-tag-type--outline {
+  border-color: var(--md-color-attention-success-border);
+  background-color: var(--md-color-attention-success-surface-tinted);
+  color: var(--md-color-text-primary);
+} 
+
+/* Warning */
+.md-tag.md-tag-theme--warning {
+  border-color: var(--md-color-attention-warning-primary);
+  background-color: var(--md-color-attention-warning-primary);
+  color: var(--md-color-grey-white);
+}
+
+.md-tag.md-tag-theme--warning.md-tag-type--light {
+  border-color: var(--md-color-attention-warning-surface-tinted);
+  background-color: var(--md-color-attention-warning-surface-tinted);
+  color: var(--md-color-text-primary);
+}
+
+.md-tag.md-tag-theme--warning.md-tag-type--outline {
+  border-color: var(--md-color-attention-warning-border);
+  background-color: var(--md-color-attention-warning-surface-tinted);
+  color: var(--md-color-text-primary);
+}
+  
+/* Info */
+.md-tag.md-tag-theme--info {
+  border-color: var(--md-color-attention-info-primary);
+  background-color: var(--md-color-attention-info-primary);
+  color: var(--md-color-grey-white);
+}
+
+.md-tag.md-tag-theme--info.md-tag-type--light {
+  border-color: var(--md-color-attention-info-surface-tinted);
+  background-color: var(--md-color-attention-info-surface-tinted);
+  color: var(--md-color-text-primary);
+}
+
+.md-tag.md-tag-theme--info.md-tag-type--outline {
+  border-color: var(--md-color-attention-info-border);
+  background-color: var(--md-color-attention-info-surface);
+  color: var(--md-color-text-primary);
+}
+
+/* Error */
+.md-tag.md-tag-theme--error {
+  border-color: var(--md-color-attention-error-primary);
+  background-color: var(--md-color-attention-error-primary);
+  color: var(--md-color-grey-white);
+}
+
+.md-tag.md-tag-theme--error.md-tag-type--light {
+  border-color: var(--md-color-attention-error-surface-tinted);
+  background-color: var(--md-color-attention-error-surface-tinted);
+  color: var(--md-color-text-primary);
+}
+
+.md-tag.md-tag-theme--error.md-tag-type--outline {
+  border-color: var(--md-color-attention-error-border);
+  background-color: var(--md-color-attention-error-surface);
+  color: var(--md-color-text-primary);
+}

package/src/tile/tile.css

@@ -13,7 +13,6 @@
   gap: var(--md-size-24);
   text-align: start;
   width: 27.5rem;
-  min-width: 27.5rem;
   max-width: 100%;
   transition: all 0.15s ease-in-out;
 }
@@ -35,6 +34,17 @@
   min-width: 100%;
 }
 
+@media (max-width: 27.5rem) {
+  .md-tile,
+  .md-tile.md-tile--medium,
+  .md-tile.md-tile--small {
+    gap: var(--md-size-12);
+    padding: var(--md-size-16);
+    width: 100%;
+    min-width: 100%;
+  }
+}
+
 .md-tile--secondary {
   background-color: var(--md-color-surface-secondary-tinted);
 }
@@ -76,9 +86,25 @@
 .md-tile__content-icon {
   height: var(--md-size-64);
   width: var(--md-size-64);
+  min-width: var(--md-size-64);
   margin-right: var(--md-size-16);
   color: var(--md-color-text-secondary);
+  flex-shrink: 0;
 }
+
+@media (max-width: 27.5rem) {
+  .md-tile__content-icon {
+    height: var(--md-size-48);
+    width: var(--md-size-48);
+    min-width: var(--md-size-48);
+  }
+
+  .md-tile__content-icon > svg {
+    height: var(--md-size-48);
+    width: var(--md-size-48);
+  }
+}
+
 .md-tile:not(.md-tile--disabled):hover .md-tile__content-icon,
 .md-tile:not(.md-tile--disabled):focus-visible .md-tile__content-icon {
   color: var(--md-color-text-primary);
@@ -117,6 +143,11 @@
   color: var(--md-color-text-disabled);
 }
 
+/* When tile is rendered as a link (asChild), add underline to heading on hover */
+a.md-tile:hover .md-tile__content-heading {
+  text-decoration: underline;
+}
+
 /* VERTICAL TILES */
 .md-tile-vertical {
   display: flex;
@@ -203,6 +234,7 @@
   color: var(--md-color-text-secondary);
   width: 8rem;
   height: 8rem;
+  flex-shrink: 0;
 }
 
 .md-tile-vertical--disabled .md-tile-vertical__content-icon {
@@ -224,7 +256,29 @@
   font-size: var(--md-size-20);
 }
 
+/* When vertical tile is rendered as a link (asChild), add underline to heading on hover */
+a.md-tile-vertical:hover .md-tile-vertical__content-heading {
+  text-decoration: underline;
+}
+
 .md-tile-vertical__content-description {
   margin-top: var(--md-size-16);
   font-size: var(--md-typography-size-16);
 }
+
+@media (max-width: 27.5rem) {
+  .md-tile-vertical__content {
+    padding: var(--md-size-24);
+  }
+
+  .md-tile-vertical__content-icon {
+    width: var(--md-size-64);
+    height: var(--md-size-64);
+    margin-bottom: var(--md-size-24);
+  }
+
+  .md-tile-vertical__content-icon > svg {
+    height: var(--md-size-64);
+    width: var(--md-size-64);
+  }
+}

package/src/tokens/tokens.css

@@ -142,6 +142,24 @@
   --md-typography-size-28: 1.75rem; /* 28px */
   --md-typography-size-34: 2.125rem; /* 34px */
 
+  /* t-shirt sizes - headings */
+  --md-typography-heading-xs: var(--md-typography-size-18);
+  --md-typography-heading-s: var(--md-typography-size-20);
+  --md-typography-heading-m: var(--md-typography-size-24);
+  --md-typography-heading-l: var(--md-typography-size-28);
+  --md-typography-heading-xl: var(--md-typography-size-34);
+
+  /* t-shirt sizes - labels */
+  --md-typography-label-s: var(--md-typography-size-14);
+  --md-typography-label-m: var(--md-typography-size-16);
+  --md-typography-label-l: var(--md-typography-size-18);
+
+  /* t-shirt body */
+  --md-typography-body-xs: var(--md-typography-size-12);
+  --md-typography-body-s: var(--md-typography-size-14);
+  --md-typography-body-m: var(--md-typography-size-16);
+  --md-typography-body-l: var(--md-typography-size-18);
+
   /* line height */
   --md-typography-line-height-small: 1.3;
   --md-typography-line-height-medium: 1.5;

package/src/typography.css

@@ -1,61 +1,84 @@
+
 /* HEADINGS */
+.md-typography-heading-xl,
+.md-typography-heading-l,
+.md-typography-heading-m,
+.md-typography-heading-s,
 .md-typography-heading-xs {
   font-family: var(--md-typography-family-heading);
-  font-weight: var(--md-typography-weight-medium);
-  font-size: var(--md-typography-size-14);
+  font-weight: var(--md-typography-weight-regular);
   line-height: var(--md-typography-line-height-small);
 }
-.md-typography-heading-sm {
-  font-family: var(--md-typography-family-heading);
-  font-weight: var(--md-typography-weight-medium);
-  font-size: var(--md-typography-size-16);
-  line-height: var(--md-typography-line-height-small);
+
+.md-typography-heading-xl {
+  font-size: var(--md-typography-heading-xl);
 }
-.md-typography-heading-md,
-.md-typography-heading {
-  font-family: var(--md-typography-family-heading);
-  font-weight: var(--md-typography-weight-regular);
-  font-size: var(--md-typography-size-20);
-  line-height: var(--md-typography-line-height-small);
+
+.md-typography-heading-l {
+  font-size: var(--md-typography-heading-l);
 }
-.md-typography-heading-lg {
-  font-family: var(--md-typography-family-heading);
-  font-weight: var(--md-typography-weight-medium);
-  font-size: var(--md-typography-size-24);
-  line-height: var(--md-typography-line-height-small);
+
+.md-typography-heading-m,
+.md-typography-heading  {
+  font-size: var(--md-typography-heading-m);
 }
-.md-typography-heading-xl {
-  font-family: var(--md-typography-family-heading);
-  font-weight: var(--md-typography-weight-regular);
-  font-size: var(--md-typography-size-28);
-  line-height: var(--md-typography-line-height-small);
+
+.md-typography-heading-s {
+  font-size: var(--md-typography-heading-s);
 }
-.md-typography-heading-2xl {
-  font-family: var(--md-typography-family-heading);
-  font-weight: var(--md-typography-weight-regular);
-  font-size: var(--md-typography-size-34);
+
+.md-typography-heading-xs {
+  font-size: var(--md-typography-heading-xs);
+}
+
+/* LEGENDS & LABELS */
+.md-typography-label-xl,
+.md-typography-label-l,
+.md-typography-label-m,
+.md-typography-label-s,
+.md-typography-label-xs {
+  font-family: var(--md-typography-family-label);
+  font-weight: var(--md-typography-weight-semibold);
   line-height: var(--md-typography-line-height-small);
 }
 
-/* BODY TEXT */
-.md-typography-body-xs {
-  font-family: var(--md-typography-family-heading);
-  font-weight: var(--md-typography-weight-regular);
-  font-size: var(--md-typography-size-12);
+.md-typography-label-l {
+  font-size: var(--md-typography-label-l);
 }
-.md-typography-body-sm {
-  font-family: var(--md-typography-family-heading);
-  font-weight: var(--md-typography-weight-regular);
-  font-size: var(--md-typography-size-14);
+
+.md-typography-label-m,
+.md-typography-label  {
+  font-size: var(--md-typography-label-m);
 }
-.md-typography-body-md,
-.md-typography-body {
-  font-family: var(--md-typography-family-heading);
-  font-weight: var(--md-typography-weight-regular);
-  font-size: var(--md-typography-size-16);
+
+.md-typography-label-s {
+  font-size: var(--md-typography-label-s);
 }
-.md-typography-body-lg {
+
+/* BODY - DEFAULT */
+.md-typography-body-xs,
+.md-typography-body-s,
+.md-typography-body-m,
+.md-typography-body-l {
   font-family: var(--md-typography-family-body);
   font-weight: var(--md-typography-weight-regular);
-  font-size: var(--md-typography-size-18);
+  line-height: var(--md-typography-line-height-medium);
+}
+
+.md-typography-body-xs{
+  font-size: var(--md-typography-body-xs);
 }
+
+.md-typography-body-s{
+  font-size: var(--md-typography-body-s);
+}
+
+.md-typography-body-m,
+.md-typography-body {
+  font-size: var(--md-typography-body-m);
+}
+
+.md-typography-body-l{
+  font-size: var(--md-typography-body-l);
+}
+