@norges-domstoler/dds-components 0.0.0-dev-20251114091802 → 0.0.0-dev-20251120071551

package/dist/index.css

@@ -1,5 +1,7 @@
-@import "@norges-domstoler/dds-design-tokens/dist/css/ddsTokens-core.css";
-@import "@norges-domstoler/dds-design-tokens/dist/css/ddsTokens-public.css";
+@import "@norges-domstoler/dds-design-tokens/dist/css/ddsTokens-core-light.css";
+@import "@norges-domstoler/dds-design-tokens/dist/css/ddsTokens-core-dark.css";
+@import "@norges-domstoler/dds-design-tokens/dist/css/ddsTokens-public-light.css";
+@import "@norges-domstoler/dds-design-tokens/dist/css/ddsTokens-public-dark.css";
 
 /* src/styles/dds-tokens.css */
 
@@ -159,6 +161,28 @@
   --dds-color-icon-action-resting-inversable: var(--dds-color-icon-on-inverse);
   --dds-color-icon-action-hover-inversable: var(--dds-color-icon-on-inverse);
 }
+.typographyStyles_tertiary-medium {
+  --dds-color-text-body: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-body-subtle: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-link: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-link-visited: var( --dds-color-text-action-visited-on-te--dds-color-text-on-tertiary-medium );
+  --dds-color-text-label: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-helper: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-placeholder: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-icon-link: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-default-inversable: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-subtle-inversable: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-medium-inversable: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-action-resting-inversable: var( --dds-color-text-on-tertiary-medium );
+  --dds-color-text-action-hover-inversable: var( --dds-color-text-on-tertiary-medium );
+  --dds-color-text-requiredfield-inversable: var( --dds-color-text-on-tertiary-medium );
+  color: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-icon-default-inversable: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-icon-subtle-inversable: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-icon-medium-inversable: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-icon-action-resting-inversable: var( --dds-color-icon-on-te--dds-color-text-on-tertiary-medium );
+  --dds-color-icon-action-hover-inversable: var( --dds-color-icon-on-te--dds-color-text-on-tertiary-medium );
+}
 :where(.typographyStyles_a),
 :where(.typographyStyles_a--nested__parent .typographyStyles_a--nested__child) {
   font: inherit;
@@ -361,6 +385,9 @@
 :where(.typographyStyles_underline) {
   text-decoration: underline;
 }
+.typographyStyles_text-color--inherit {
+  color: inherit;
+}
 .typographyStyles_text-color--default {
   color: var(--dds-color-text-default-inversable);
 }
@@ -394,6 +421,48 @@
 .typographyStyles_text-color--on-notification {
   color: var(--dds-color-text-on-notification);
 }
+.typographyStyles_text-color--on-primary-default {
+  color: var(--dds-color-text-on-primary-default);
+}
+.typographyStyles_text-color--on-primary-medium {
+  color: var(--dds-color-text-on-primary-medium);
+}
+.typographyStyles_text-color--on-primary-subtle {
+  color: var(--dds-color-text-on-primary-subtle);
+}
+.typographyStyles_text-color--on-primary-strong {
+  color: var(--dds-color-text-on-primary-strong);
+}
+.typographyStyles_text-color--on-secondary-default {
+  color: var(--dds-color-text-on-secondary-default);
+}
+.typographyStyles_text-color--on-secondary-medium {
+  color: var(--dds-color-text-on-secondary-medium);
+}
+.typographyStyles_text-color--on-secondary-subtle {
+  color: var(--dds-color-text-on-secondary-subtle);
+}
+.typographyStyles_text-color--on-secondary-strong {
+  color: var(--dds-color-text-on-secondary-strong);
+}
+.typographyStyles_text-color--on-tertiary-default {
+  color: var(--dds-color-text-on-tertiary-default);
+}
+.typographyStyles_text-color--on-tertiary-medium {
+  color: var(--dds-color-text-on-tertiary-medium);
+}
+.typographyStyles_text-color--on-tertiary-subtle {
+  color: var(--dds-color-text-on-tertiary-subtle);
+}
+.typographyStyles_text-color--on-tertiary-strong {
+  color: var(--dds-color-text-on-tertiary-strong);
+}
+.typographyStyles_text-color--on-data-default {
+  color: var(--dds-color-text-on-data-default);
+}
+.typographyStyles_text-color--on-data-subtle {
+  color: var(--dds-color-text-on-data-subtle);
+}
 .typographyStyles_text-color--on-inverse {
   color: var(--dds-color-text-on-inverse);
 }
@@ -1530,6 +1599,7 @@
   @media (prefers-reduced-motion: no-preference) {
     transition: background-color 0.2s, var(--dds-focus-transition);
   }
+  color: inherit;
   &:hover {
     background-color: var(--dds-color-surface-hover-default);
     color: var(--dds-color-text-action-hover);
@@ -1909,7 +1979,7 @@
   display: flex;
   box-sizing: border-box;
   align-items: center;
-  background-color: var(--dds-color-surface-default);
+  background-color: inherit;
   text-decoration: none;
   padding: var(--dds-spacing-x0-75);
   gap: var(--dds-spacing-x0-25);
@@ -2758,7 +2828,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .Drawer_drawer-header {
   padding-bottom: calc(var(--dds-spacing-x0-75) - var(--dds-drawer-content-container-padding));
-  background-color: var(--dds-color-surface-default);
   z-index: 1;
 }
 .Drawer_button--close {
@@ -2876,23 +2945,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 
 /* src/components/Tooltip/Tooltip.module.css */
-.Tooltip_container {
-  width: -moz-fit-content;
-  width: fit-content;
-}
-.Tooltip_svg-arrow__border {
-  fill: var(--dds-color-border-subtle);
-}
-.Tooltip_svg-arrow__background {
-  fill: var(--dds-color-surface-default);
-}
 .Tooltip_paper {
-  width: -moz-fit-content;
-  width: fit-content;
-  position: absolute;
   z-index: var(--dds-zindex-tooltip);
-  text-align: center;
-  padding: var(--dds-spacing-x0-75);
 }
 
 /* src/components/Fieldset/Fieldset.module.css */
@@ -3306,7 +3360,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   overflow: auto;
 }
 .Modal_header-container {
-  background-color: var(--dds-color-surface-default);
   padding-bottom: calc(var(--dds-spacing-x0-75) - var(--dds-modal-content-padding));
   z-index: 1;
 }
@@ -3878,6 +3931,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .Table_cell--head {
   background-color: var(--dds-color-brand-primary-subtle);
+  color: var(--dds-color-text-on-primary-subtle);
 }
 .Table_cell--left {
   text-align: left;
@@ -3900,6 +3954,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   user-select: text;
   display: flex;
   align-items: center;
+  color: inherit;
   @media (prefers-reduced-motion: no-preference) {
     transition: all 0.2s;
   }
@@ -3913,6 +3968,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   display: flex;
   align-items: center;
   justify-content: center;
+  color: inherit;
   @media (prefers-reduced-motion: no-preference) {
     transition: all 0.2s;
   }
@@ -4020,6 +4076,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Tag_container--success--default {
   background-color: var(--dds-color-surface-success-default);
   border-color: var(--dds-color-border-success);
+  color: var(--dds-color-text-on-status-default);
   svg {
     color: var(--dds-color-icon-on-success-default);
   }
@@ -4027,6 +4084,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Tag_container--success--strong {
   background-color: var(--dds-color-surface-success-strong);
   border-color: var(--dds-color-surface-success-strong);
+  color: var(--dds-color-text-on-status-strong);
   svg {
     color: var(--dds-color-icon-on-success-strong);
   }
@@ -4034,6 +4092,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Tag_container--danger--default {
   background-color: var(--dds-color-surface-danger-default);
   border-color: var(--dds-color-border-danger);
+  color: var(--dds-color-text-on-status-default);
   svg {
     color: var(--dds-color-icon-on-danger-default);
   }
@@ -4041,6 +4100,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Tag_container--danger--strong {
   background-color: var(--dds-color-surface-danger-strong);
   border-color: var(--dds-color-surface-danger-strong);
+  color: var(--dds-color-text-on-status-strong);
   svg {
     color: var(--dds-color-icon-on-danger-strong);
   }
@@ -4048,6 +4108,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Tag_container--warning--default {
   background-color: var(--dds-color-surface-warning-default);
   border-color: var(--dds-color-border-warning);
+  color: var(--dds-color-text-on-status-default);
   svg {
     color: var(--dds-color-icon-on-warning-default);
   }
@@ -4055,6 +4116,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Tag_container--warning--strong {
   background-color: var(--dds-color-surface-warning-strong);
   border-color: var(--dds-color-surface-warning-strong);
+  color: var(--dds-color-text-on-status-strong);
   svg {
     color: var(--dds-color-icon-on-warning-strong);
   }
@@ -4062,6 +4124,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Tag_container--info--default {
   background-color: var(--dds-color-surface-info-default);
   border-color: var(--dds-color-border-info);
+  color: var(--dds-color-text-on-status-default);
   svg {
     color: var(--dds-color-icon-on-info-default);
   }
@@ -4069,6 +4132,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Tag_container--info--strong {
   background-color: var(--dds-color-surface-info-strong);
   border-color: var(--dds-color-surface-info-strong);
+  color: var(--dds-color-text-on-status-strong);
   svg {
     color: var(--dds-color-icon-on-info-strong);
   }