@digdir/designsystemet-css 0.11.0-alpha.2 → 0.11.0-alpha.4

package/index.css

@@ -3,10 +3,11 @@
 @layer ds.typography, ds.utils, ds.box, ds.btn;
 
 /** Import order defines ordinal specificity for layers */
-@import url('./label.css');
-@import url('./heading.css');
-@import url('./paragraph.css');
-@import url('./ingress.css');
+@import url('./typography/label.css');
+@import url('./typography/heading.css');
+@import url('./typography/paragraph.css');
+@import url('./typography/ingress.css');
+@import url('./typography/error-message.css');
 @import url('./button.css');
 @import url('./utils.css');
 @import url('./box.css');
@@ -15,7 +16,6 @@
 @import url('./accordion.css');
 @import url('./switch.css');
 @import url('./checkbox.css');
-@import url('./error-message.css');
 @import url('./radio.css');
 @import url('./search.css');
 @import url('./native-select.css');

package/link.css

@@ -5,8 +5,8 @@
     --dsc-link-color-active: var(--ds-color-accent-text-default);
     --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
     --dsc-link-color-visited: var(--ds-global-purple-12);
-    --dsc-link-color-focus: var(--ds-color-accent-text-default);
-    --dsc-link-color-focus-background: var(--ds-color-neutral-surface-default);
+    --dsc-link-color-focus: var(--ds-color-focus-inner);
+    --dsc-link-color-focus-background: var(--ds-color-focus-outer);
 
     position: relative;
     color: var(--dsc-link-color);
@@ -19,24 +19,20 @@
     gap: var(--ds-spacing-1);
   }
 
-  .ds-link__accent {
+  .ds-link--accent {
     --dsc-link-color: var(--ds-color-accent-text-subtle);
     --dsc-link-color-hover: var(--ds-color-accent-text-default);
     --dsc-link-color-active: var(--ds-color-accent-text-default);
     --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
     --dsc-link-color-visited: var(--ds-global-purple-12);
-    --dsc-link-color-focus: var(--ds-focus-inner);
-    --dsc-link-color-focus-background: var(--ds-focus-outer);
   }
 
-  .ds-link__neutral {
+  .ds-link--neutral {
     --dsc-link-color: var(--ds-color-neutral-text-default);
     --dsc-link-color-hover: var(--ds-color-neutral-text-subtle);
     --dsc-link-color-active: var(--ds-color-neutral-text-subtle);
     --dsc-link-color-active-background: var(--ds-color-neutral-surface-default);
     --dsc-link-color-visited: var(--ds-global-purple-12);
-    --dsc-link-color-focus: var(--ds-focus-inner);
-    --dsc-link-color-focus-background: var(--ds-focus-outer);
   }
 
   .ds-link:visited {

package/native-select.css

@@ -22,7 +22,6 @@
 
   .ds-native-select {
     position: relative;
-    font: inherit;
     font-family: inherit;
     box-sizing: border-box;
     padding: 0 var(--ds-spacing-2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-css",
-  "version": "0.11.0-alpha.2",
+  "version": "0.11.0-alpha.4",
   "description": "CSS for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",
@@ -39,5 +39,5 @@
     "postcss-import": "^16.0.1",
     "rimraf": "^5.0.5"
   },
-  "gitHead": "92430c5083e185ada96522d28ff1c5bd2811de88"
+  "gitHead": "87591aa2ce0bbcb4fc451ddcbb2ae9f15cfcfeca"
 }

package/radio.css

@@ -86,9 +86,9 @@
   .ds-radio:has(.ds-radio__input:focus-visible) {
     --dsc-focus-border-width: 3px;
 
-    outline: var(--dsc-focus-border-width) solid var(--ds-focus-outer);
+    outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);
     outline-offset: var(--dsc-focus-border-width);
-    box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-focus-inner);
+    box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
     border-radius: var(--ds-border-radius-md);
   }
 

package/search.css

@@ -52,7 +52,6 @@
   }
 
   .ds-search__input {
-    font: inherit;
     font-family: inherit;
     position: relative;
     box-sizing: border-box;

package/skiplink.css

@@ -37,8 +37,8 @@
     position: relative;
     border-radius: var(--ds-border-radius-md);
     min-height: var(--ds-sizing-10);
-    outline: var(--dsc-skiplink-border-width) solid var(--ds-color-neutral-text-default);
+    outline: var(--dsc-skiplink-border-width) solid var(--ds-color-focus-outer);
     outline-offset: var(--dsc-skiplink-border-width);
-    box-shadow: 0 0 0 var(--dsc-skiplink-border-width) var(--ds-color-neutral-background-default);
+    box-shadow: 0 0 0 var(--dsc-skiplink-border-width) var(--ds-color-focus-inner);
   }
 }

package/switch.css

@@ -156,9 +156,9 @@
   }
 
   /*   .ds-switch__input:focus-visible + .ds-switch__label .ds-switch__track {
-    outline: var(--dsc-switch-focus-border-width) solid var(--ds-focus-outer);
+    outline: var(--dsc-switch-focus-border-width) solid var(--ds-color-focus-outer);
     outline-offset: var(--dsc-switch-focus-border-width);
-    box-shadow: 0 0 0 var(--dsc-switch-focus-border-width) var(--ds-focus-inner);
+    box-shadow: 0 0 0 var(--dsc-switch-focus-border-width) var(--ds-color-focus-inner);
   } */
 
   /**
@@ -167,9 +167,9 @@
   .ds-switch:has(.ds-switch__input:focus-visible) {
     --dsc-focus-border-width: 3px;
 
-    outline: var(--dsc-focus-border-width) solid var(--ds-focus-outer);
+    outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);
     outline-offset: var(--dsc-focus-border-width);
-    box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-focus-inner);
+    box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
     border-radius: var(--ds-border-radius-md);
   }
 

package/table.css

@@ -33,7 +33,6 @@
   .ds-table__head {
     z-index: 0;
     box-sizing: border-box;
-    font: inherit;
     font-family: inherit;
     border-spacing: 0;
     font-weight: 500;
@@ -42,7 +41,6 @@
 
   .ds-table__header__cell {
     padding: var(--dsc-table-padding);
-    font: inherit;
     font-family: inherit;
     background-color: var(--ds-color-neutral-background-default);
     border-spacing: 0;
@@ -63,7 +61,6 @@
     position: relative;
     width: 100%;
     border: none;
-    font: inherit;
     font-family: inherit;
     display: flex;
     cursor: pointer;

package/tabs.css

@@ -16,6 +16,7 @@
     cursor: pointer;
     color: var(--ds-color-neutral-text-subtle);
     position: relative;
+    font-family: inherit;
   }
 
   .ds-tabs__content {
@@ -23,21 +24,6 @@
     color: var(--ds-color-neutral-text-default);
   }
 
-  .ds-tabs--sm .ds-tabs__tab,
-  .ds-tabs--sm .ds-tabs__content {
-    font: var(--ds-typography-paragraph-short-sm);
-  }
-
-  .ds-tabs--md .ds-tabs__tab,
-  .ds-tabs--md .ds-tabs__content {
-    font: var(--ds-typography-paragraph-short-md);
-  }
-
-  .ds-tabs--lg .ds-tabs__tab,
-  .ds-tabs--lg .ds-tabs__content {
-    font: var(--ds-typography-paragraph-short-lg);
-  }
-
   .ds-tabs--sm .ds-tabs__tab {
     padding: var(--ds-spacing-2) var(--ds-spacing-4);
   }

package/textarea.css

@@ -27,7 +27,6 @@
   }
 
   .ds-textarea__input {
-    font: inherit;
     font-family: inherit;
     position: relative;
     box-sizing: border-box;

package/textfield.css

@@ -5,17 +5,16 @@
   }
 
   .ds-textfield__adornment {
-    color: var(--ds-color-neutral-border-strong);
+    color: var(--ds-color-neutral-text-subtle);
     background: var(--ds-color-neutral-background-subtle);
     padding: 9px var(--ds-spacing-4);
     border-radius: var(--ds-border-radius-md);
-    border: solid 1px var(--ds-color-neutral-border-strong);
+    border: solid 1px var(--ds-color-neutral-border-default);
     box-sizing: border-box;
     display: inline-block;
   }
 
   .ds-textfield__input {
-    font: inherit;
     font-family: inherit;
     position: relative;
     box-sizing: border-box;

package/tooltip.css

@@ -6,8 +6,6 @@
     padding: var(--ds-spacing-1) var(--ds-spacing-2);
     color: var(--ds-color-neutral-background-default);
     border-radius: var(--ds-border-radius-md);
-    font: var(--ds-typography-paragraph-xs);
-    font-family: inherit;
   }
 
   .ds-tooltip__arrow {

package/utils.css

@@ -19,9 +19,9 @@
   .ds-focus:focus-visible {
     --dsc-focus-border-width: 3px;
 
-    outline: var(--dsc-focus-border-width) solid var(--ds-focus-outer);
+    outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);
     outline-offset: var(--dsc-focus-border-width);
-    box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-focus-inner);
+    box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
   }
 
   @layer animate-height {

package/dist/error-message.css

@@ -1 +0,0 @@
-@layer ds.typography.error-message{.ds-error-message{--dsc-bottom-spacing:var(--ds-spacing-5);margin:0}.ds-error-message--error{color:var(--ds-color-danger-text-subtle)}.ds-error-message--spacing{margin-bottom:var(--dsc-bottom-spacing)}.ds-error-message--lg{--dsc-bottom-spacing:var(--ds-spacing-5);font:var(--ds-typography-error_message-lg);font-family:inherit}.ds-error-message--md{--dsc-bottom-spacing:var(--ds-spacing-5);font:var(--ds-typography-error_message-md);font-family:inherit}.ds-error-message--sm{--dsc-bottom-spacing:var(--ds-spacing-4);font:var(--ds-typography-error_message-sm);font-family:inherit}.ds-error-message--xs{--dsc-bottom-spacing:var(--ds-spacing-3);font:var(--ds-typography-error_message-xs);font-family:inherit}}

package/dist/heading.css

@@ -1 +0,0 @@
-@layer ds.typography.heading{.ds-heading{--dsc-bottom-spacing:var(--ds-spacing-6);color:var(--ds-color-neutral-text-default);margin:0}.ds-heading--spacing{margin-bottom:var(--dsc-bottom-spacing)}.ds-heading--2xl{--dsc-bottom-spacing:var(--ds-spacing-7);font:var(--ds-typography-heading-2xl);font-family:inherit}.ds-heading--xl{--dsc-bottom-spacing:var(--ds-spacing-6);font:var(--ds-typography-heading-xl);font-family:inherit}.ds-heading--lg{--dsc-bottom-spacing:var(--ds-spacing-5);font:var(--ds-typography-heading-lg);font-family:inherit}.ds-heading--md{--dsc-bottom-spacing:var(--ds-spacing-4);font:var(--ds-typography-heading-md);font-family:inherit}.ds-heading--sm{--dsc-bottom-spacing:var(--ds-spacing-3);font:var(--ds-typography-heading-sm);font-family:inherit}.ds-heading--xs{--dsc-bottom-spacing:var(--ds-spacing-2);font:var(--ds-typography-heading-xs);font-family:inherit}.ds-heading--2xs{--dsc-bottom-spacing:var(--ds-spacing-1);font:var(--ds-typography-heading-2xs);font-family:inherit}}

package/dist/ingress.css

@@ -1 +0,0 @@
-@layer ds.typography.ingress{.ds-ingress{--dsc-bottom-spacing:var(--ds-spacing-5);color:var(--ds-color-neutral-text-default);margin:0}.ds-ingress--spacing{margin-bottom:var(--dsc-bottom-spacing)}.ds-ingress--md{--dsc-bottom-spacing:var(--ds-spacing-5);font:var(--ds-typography-ingress-md);font-family:inherit}.ds-ingress--lg{--dsc-bottom-spacing:var(--ds-spacing-6);font:var(--ds-typography-ingress-lg);font-family:inherit}.ds-ingress--sm{--dsc-bottom-spacing:var(--ds-spacing-7);font:var(--ds-typography-ingress-sm);font-family:inherit}.ds-ingress--xs{--dsc-bottom-spacing:var(--ds-spacing-8);font:var(--ds-typography-ingress-xs);font-family:inherit}}

package/dist/label.css

@@ -1 +0,0 @@
-@layer ds.typography.label{.ds-label{--dsc-bottom-spacing:var(--ds-spacing-1);color:var(--ds-color-neutral-text-default);display:inline-block;margin:0;padding:0}.ds-label--spacing{margin-bottom:var(--dsc-bottom-spacing)}.ds-label--lg{font:var(--ds-typography-label-lg);font-family:inherit}.ds-label--md{font:var(--ds-typography-label-md);font-family:inherit}.ds-label--sm{font:var(--ds-typography-label-sm);font-family:inherit}.ds-label--xs{font:var(--ds-typography-label-xs);font-family:inherit}.ds-label--regular-weight{font-weight:400}.ds-label--medium-weight{font-weight:500}.ds-label--semibold-weight{font-weight:600}}

package/dist/paragraph.css

@@ -1 +0,0 @@
-@layer ds.typography.paragraph{.ds-paragraph{--dsc-bottom-spacing:var(--ds-spacing-5);color:var(--ds-color-neutral-text-default);margin:0}.ds-paragraph--spacing{margin-bottom:var(--dsc-bottom-spacing)}.ds-paragraph--lg{--dsc-bottom-spacing:var(--ds-spacing-6);font:var(--ds-typography-paragraph-lg);font-family:inherit}.ds-paragraph--lg.ds-paragraph--short{font:var(--ds-typography-paragraph-short-lg);font-family:inherit}.ds-paragraph--lg.ds-paragraph--long{line-height:var(--ds-typography-paragraph-long-lg)}.ds-paragraph--md{--dsc-bottom-spacing:var(--ds-spacing-5);font:var(--ds-typography-paragraph-md);font-family:inherit}.ds-paragraph--md.ds-paragraph--short{--dsc-bottom-spacing:var(--ds-spacing-5);font:var(--ds-typography-paragraph-short-md);font-family:inherit}.ds-paragraph--md.ds-paragraph--long{line-height:var(--ds-typography-paragraph-long-md)}.ds-paragraph--sm{--dsc-bottom-spacing:var(--ds-spacing-4);font:var(--ds-typography-paragraph-sm);font-family:inherit}.ds-paragraph--sm.ds-paragraph--short{--dsc-bottom-spacing:var(--ds-spacing-4);font:var(--ds-typography-paragraph-short-sm);font-family:inherit}.ds-paragraph--sm.ds-paragraph--long{line-height:var(--ds-typography-paragraph-long-sm)}.ds-paragraph--xs{--dsc-bottom-spacing:var(--ds-spacing-3);font:var(--ds-typography-paragraph-xs);font-family:inherit}.ds-paragraph--xs.ds-paragraph--short{--dsc-bottom-spacing:var(--ds-spacing-3);font:var(--ds-typography-paragraph-short-xs);font-family:inherit}.ds-paragraph--xs.ds-paragraph--long{line-height:var(--ds-typography-paragraph-long-xs)}}

package/error-message.css

@@ -1,43 +0,0 @@
-@layer ds.typography.error-message {
-  .ds-error-message {
-    --dsc-bottom-spacing: var(--ds-spacing-5);
-
-    margin: 0;
-  }
-
-  .ds-error-message--error {
-    color: var(--ds-color-danger-text-subtle);
-  }
-
-  .ds-error-message--spacing {
-    margin-bottom: var(--dsc-bottom-spacing);
-  }
-
-  .ds-error-message--lg {
-    --dsc-bottom-spacing: var(--ds-spacing-5);
-
-    font: var(--ds-typography-error_message-lg);
-    font-family: inherit;
-  }
-
-  .ds-error-message--md {
-    --dsc-bottom-spacing: var(--ds-spacing-5);
-
-    font: var(--ds-typography-error_message-md);
-    font-family: inherit;
-  }
-
-  .ds-error-message--sm {
-    --dsc-bottom-spacing: var(--ds-spacing-4);
-
-    font: var(--ds-typography-error_message-sm);
-    font-family: inherit;
-  }
-
-  .ds-error-message--xs {
-    --dsc-bottom-spacing: var(--ds-spacing-3);
-
-    font: var(--ds-typography-error_message-xs);
-    font-family: inherit;
-  }
-}

package/heading.css

@@ -1,61 +0,0 @@
-@layer ds.typography.heading {
-  .ds-heading {
-    --dsc-bottom-spacing: var(--ds-spacing-6);
-
-    margin: 0;
-    color: var(--ds-color-neutral-text-default);
-  }
-
-  .ds-heading--spacing {
-    margin-bottom: var(--dsc-bottom-spacing);
-  }
-
-  .ds-heading--2xl {
-    --dsc-bottom-spacing: var(--ds-spacing-7);
-
-    font: var(--ds-typography-heading-2xl);
-    font-family: inherit;
-  }
-
-  .ds-heading--xl {
-    --dsc-bottom-spacing: var(--ds-spacing-6);
-
-    font: var(--ds-typography-heading-xl);
-    font-family: inherit;
-  }
-
-  .ds-heading--lg {
-    --dsc-bottom-spacing: var(--ds-spacing-5);
-
-    font: var(--ds-typography-heading-lg);
-    font-family: inherit;
-  }
-
-  .ds-heading--md {
-    --dsc-bottom-spacing: var(--ds-spacing-4);
-
-    font: var(--ds-typography-heading-md);
-    font-family: inherit;
-  }
-
-  .ds-heading--sm {
-    --dsc-bottom-spacing: var(--ds-spacing-3);
-
-    font: var(--ds-typography-heading-sm);
-    font-family: inherit;
-  }
-
-  .ds-heading--xs {
-    --dsc-bottom-spacing: var(--ds-spacing-2);
-
-    font: var(--ds-typography-heading-xs);
-    font-family: inherit;
-  }
-
-  .ds-heading--2xs {
-    --dsc-bottom-spacing: var(--ds-spacing-1);
-
-    font: var(--ds-typography-heading-2xs);
-    font-family: inherit;
-  }
-}

package/ingress.css

@@ -1,40 +0,0 @@
-@layer ds.typography.ingress {
-  .ds-ingress {
-    --dsc-bottom-spacing: var(--ds-spacing-5);
-
-    margin: 0;
-    color: var(--ds-color-neutral-text-default);
-  }
-
-  .ds-ingress--spacing {
-    margin-bottom: var(--dsc-bottom-spacing);
-  }
-
-  .ds-ingress--md {
-    --dsc-bottom-spacing: var(--ds-spacing-5);
-
-    font: var(--ds-typography-ingress-md);
-    font-family: inherit;
-  }
-
-  .ds-ingress--lg {
-    --dsc-bottom-spacing: var(--ds-spacing-6);
-
-    font: var(--ds-typography-ingress-lg);
-    font-family: inherit;
-  }
-
-  .ds-ingress--sm {
-    --dsc-bottom-spacing: var(--ds-spacing-7);
-
-    font: var(--ds-typography-ingress-sm);
-    font-family: inherit;
-  }
-
-  .ds-ingress--xs {
-    --dsc-bottom-spacing: var(--ds-spacing-8);
-
-    font: var(--ds-typography-ingress-xs);
-    font-family: inherit;
-  }
-}

package/label.css

@@ -1,46 +0,0 @@
-@layer ds.typography.label {
-  .ds-label {
-    --dsc-bottom-spacing: var(--ds-spacing-1);
-
-    display: inline-block;
-    margin: 0;
-    padding: 0;
-    color: var(--ds-color-neutral-text-default);
-  }
-
-  .ds-label--spacing {
-    margin-bottom: var(--dsc-bottom-spacing);
-  }
-
-  .ds-label--lg {
-    font: var(--ds-typography-label-lg);
-    font-family: inherit;
-  }
-
-  .ds-label--md {
-    font: var(--ds-typography-label-md);
-    font-family: inherit;
-  }
-
-  .ds-label--sm {
-    font: var(--ds-typography-label-sm);
-    font-family: inherit;
-  }
-
-  .ds-label--xs {
-    font: var(--ds-typography-label-xs);
-    font-family: inherit;
-  }
-
-  .ds-label--regular-weight {
-    font-weight: 400;
-  }
-
-  .ds-label--medium-weight {
-    font-weight: 500;
-  }
-
-  .ds-label--semibold-weight {
-    font-weight: 600;
-  }
-}

package/paragraph.css

@@ -1,82 +0,0 @@
-@layer ds.typography.paragraph {
-  .ds-paragraph {
-    --dsc-bottom-spacing: var(--ds-spacing-5);
-
-    color: var(--ds-color-neutral-text-default);
-    margin: 0;
-  }
-
-  .ds-paragraph--spacing {
-    margin-bottom: var(--dsc-bottom-spacing);
-  }
-
-  .ds-paragraph--lg {
-    --dsc-bottom-spacing: var(--ds-spacing-6);
-
-    font: var(--ds-typography-paragraph-lg);
-    font-family: inherit;
-  }
-
-  .ds-paragraph--lg.ds-paragraph--short {
-    font: var(--ds-typography-paragraph-short-lg);
-    font-family: inherit;
-  }
-
-  .ds-paragraph--lg.ds-paragraph--long {
-    line-height: var(--ds-typography-paragraph-long-lg);
-  }
-
-  .ds-paragraph--md {
-    --dsc-bottom-spacing: var(--ds-spacing-5);
-
-    font: var(--ds-typography-paragraph-md);
-    font-family: inherit;
-  }
-
-  .ds-paragraph--md.ds-paragraph--short {
-    --dsc-bottom-spacing: var(--ds-spacing-5);
-
-    font: var(--ds-typography-paragraph-short-md);
-    font-family: inherit;
-  }
-
-  .ds-paragraph--md.ds-paragraph--long {
-    line-height: var(--ds-typography-paragraph-long-md);
-  }
-
-  .ds-paragraph--sm {
-    --dsc-bottom-spacing: var(--ds-spacing-4);
-
-    font: var(--ds-typography-paragraph-sm);
-    font-family: inherit;
-  }
-
-  .ds-paragraph--sm.ds-paragraph--short {
-    --dsc-bottom-spacing: var(--ds-spacing-4);
-
-    font: var(--ds-typography-paragraph-short-sm);
-    font-family: inherit;
-  }
-
-  .ds-paragraph--sm.ds-paragraph--long {
-    line-height: var(--ds-typography-paragraph-long-sm);
-  }
-
-  .ds-paragraph--xs {
-    --dsc-bottom-spacing: var(--ds-spacing-3);
-
-    font: var(--ds-typography-paragraph-xs);
-    font-family: inherit;
-  }
-
-  .ds-paragraph--xs.ds-paragraph--short {
-    --dsc-bottom-spacing: var(--ds-spacing-3);
-
-    font: var(--ds-typography-paragraph-short-xs);
-    font-family: inherit;
-  }
-
-  .ds-paragraph--xs.ds-paragraph--long {
-    line-height: var(--ds-typography-paragraph-long-xs);
-  }
-}