fix(field, fieldset, suggestion): add experimental v2 export and missing variables

.changeset/fresh-parks-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Dropdown**: Removed hardcoded `color` and `font-weight` on some heading elements that caused disconnect with global font and other elements in the dropdown.

.changeset/neat-rockets-build.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Suggestion**: Added `--dsc-suggestion-option-checkmark-border-color`.

.changeset/nice-queens-enter.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Field**: Added `--dsc-field-description-color`, `--dsc-field-affix-background`, and `--dsc-field-affix-color`.

.changeset/petite-falcons-stick.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Fieldset**: Added `--dsc-fieldset-description-color`.

apps/storybook/.storybook/manager.ts

@@ -1,6 +1,6 @@
 import { addons } from 'storybook/manager-api';
 import customTheme from './customThemeLight';
-import '@digdir/designsystemet-css';
+import '@digdir/designsystemet-css/v2';
 import '@digdir/designsystemet-css/theme.css';
 
 addons.setConfig({

apps/storybook/.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import './style.css';
 /* We use relative imports to get HMR updates when developing */
-import '../../../packages/css/src/index.css';
+import '../../../packages/css/src/v2/index.css';
 import '../../../packages/css/theme/designsystemet.css';
 
 import { DocsContainer } from '@storybook/addon-docs/blocks';

packages/css/package.json

@@ -21,7 +21,8 @@
       "types": "./types.d.ts",
       "default": "./dist/src/index.css"
     },
-    "./*": "./dist/src/*"
+    "./*": "./dist/src/*",
+    "./v2": "./dist/src/v2/index.css"
   },
   "files": [
     "./types.d.ts",
@@ -45,7 +46,7 @@
     "digdir"
   ],
   "scripts": {
-    "build": "rimraf dist && pnpm build:theme && postcss ./src/*.css --base . --dir ./dist && postcss ./theme/*.css --dir ./dist/theme",
+    "build": "rimraf dist && pnpm build:theme && postcss ./src/*.css --base . --dir ./dist && postcss ./theme/*.css --dir ./dist/theme && postcss ./src/v2/*.css --dir ./dist/src/v2",
     "build:theme": "tsx ../cli/bin/designsystemet.ts tokens build -t ../../design-tokens -o ./theme --experimental-tailwind"
   },
   "dependencies": {

packages/css/src/dropdown.css

@@ -27,9 +27,7 @@
   & > :is(h2, h3, h4, h5, h6) {
     align-items: center;
     box-sizing: border-box;
-    color: var(--ds-color-neutral-text-default);
     font-size: inherit;
-    font-weight: var(--ds-font-weight-medium);
     margin: 0;
     min-height: var(--dsc-dropdown-item-size);
     padding: var(--dsc-dropdown-item-padding);

packages/css/src/field.css

@@ -2,6 +2,7 @@
   --dsc-field-content-spacing: var(--ds-size-2);
   --dsc-field-counter-over: '%d tegn for mye';
   --dsc-field-counter-under: '%d tegn igjen';
+  --dsc-field-description-color: var(--ds-color-neutral-text-subtle);
 
   @composes ds-print-preserve from './base.css';
 
@@ -14,9 +15,7 @@
   }
 
   & [data-field='description'] {
-    color: var(
-      --ds-color-neutral-text-subtle
-    ); /* TODO: Change to opacity or color-mix(currentColor, transparent) to ensure contrast when parent element color changes? */
+    color: var(--dsc-field-description-color);
     margin-top: 0; /* Line-height removes the need for this */
     margin-block: 0;
   }
@@ -185,11 +184,13 @@
   --dsc-field-affix-border-style: solid;
   --dsc-field-affix-border-color: var(--ds-color-neutral-border-default);
   --dsc-field-affix-padding-inline: var(--ds-size-4);
+  --dsc-field-affix-background: var(--ds-color-neutral-surface-tinted);
+  --dsc-field-affix-color: var(--ds-color-neutral-text-subtle);
 
-  background: var(--ds-color-neutral-surface-tinted);
+  background: var(--dsc-field-affix-background);
   border-radius: var(--ds-border-radius-md);
   box-sizing: border-box;
-  color: var(--ds-color-neutral-text-subtle);
+  color: var(--dsc-field-affix-color);
   max-width: 100%;
   white-space: nowrap;
 

packages/css/src/fieldset.css

@@ -1,6 +1,7 @@
 .ds-fieldset {
   --dsc-fieldset-gap: var(--ds-size-4);
   --_dsc-fieldset-gap--half: calc(var(--dsc-fieldset-gap) / 2);
+  --dsc-fieldset-description-color: var(--ds-color-neutral-text-subtle);
 
   border: 0;
   margin: 0;
@@ -23,15 +24,15 @@
 
   & > legend + p /* Kept for backwards compatibility */,
   & > [data-field='description'] {
-    color: var(--ds-color-neutral-text-subtle);
+    color: var(--dsc-fieldset-description-color);
   }
-  & > legend + p /* Kept for backawrds compatibility */,
+  & > legend + p /* Kept for backwards compatibility */,
   & > legend + [data-field='description'] {
     margin-block-start: 0; /* Reset margin for description after legend */
   }
 
   &:disabled > legend,
-  &:disabled > legend + p /* Kept for backawrds compatibility */,
+  &:disabled > legend + p /* Kept for backwards compatibility */,
   &:disabled > [data-field='description'] {
     opacity: var(--ds-opacity-disabled);
   }

packages/css/src/suggestion.css

@@ -188,6 +188,7 @@
     [data-multiple] & {
       & > u-option:not([data-empty]) {
         --dsc-suggestion-option-checkmark-border: max(2px, 0.125rem);
+        --dsc-suggestion-option-checkmark-border-color: var(--ds-color-neutral-border-default);
 
         padding-inline-start: calc(var(--dsc-suggestion-option-padding) + var(--dsc-suggestion-option-checkmark-size) + var(--dsc-suggestion-option-gap));
         /*mock checkbox styles copied from input.css*/
@@ -199,7 +200,7 @@
           width: var(--dsc-suggestion-option-checkmark-size);
           height: var(--dsc-suggestion-option-checkmark-size);
           border-radius: var(--ds-border-radius-sm);
-          outline: var(--dsc-suggestion-option-checkmark-border) solid var(--ds-color-neutral-border-default);
+          outline: var(--dsc-suggestion-option-checkmark-border) solid var(--dsc-suggestion-option-checkmark-border-color);
           outline-offset: calc(-1 * var(--dsc-suggestion-option-checkmark-border));
           padding: 0.188rem;
           box-sizing: border-box;

packages/css/src/v2/README.md

@@ -0,0 +1,3 @@
+⚠️ Use at your own risk ⚠️
+
+These are experimental changes for next major version and not finalized.

packages/css/src/v2/index.css

@@ -0,0 +1,2 @@
+@import url('../index.css');
+@import url('./overrides.css');

packages/css/src/v2/overrides.css

@@ -0,0 +1,97 @@
+/** Notes
+ * This file contains planned changes for the next major version of Designsystemet.
+ * Exceptions:
+ * - Did not override --readonly and --disabled states
+ * - .ds-link has changed mapping from text-default to text-subtle when data-color="neutral"
+ * - .ds-togglegroup: No overrides added as the component is being removed in the next major version.
+ * -
+ */
+[data-color-scheme],
+body {
+  /** Change from neutral to color */
+  background: var(--ds-color-background-default);
+  color: var(--ds-color-text-default);
+}
+
+.ds-dialog {
+  /** Change from neutral to color */
+  --dsc-dialog-background: var(--ds-color-surface-default);
+  --dsc-dialog-color: var(--ds-color-text-default);
+  --dsc-dialog-divider-border-color: var(--ds-color-border-subtle);
+  --dsc-dialog-border-color: var(--ds-color-border-subtle);
+}
+
+.ds-divider {
+  /** Change from neutral to color */
+  --dsc-divider-border-color: var(--ds-color-border-subtle);
+}
+
+.ds-dropdown {
+  /** Change from neutral to color */
+  --dsc-dropdown-background: var(--ds-color-surface-default);
+  --dsc-dropdown-border-color: var(--ds-color-border-subtle);
+}
+
+.ds-error-summary {
+  /** Change from neutral to color */
+  --dsc-errorsummary-link-color: var(--ds-color-text-default);
+}
+
+.ds-field {
+  /** Change from neutral to color */
+  --dsc-field-description-color: var(--ds-color-text-subtle);
+
+  &[data-variant='outline'] {
+    /** Change from neutral to color */
+    --dsc-field-border-color: var(--ds-color-border-default);
+  }
+}
+
+.ds-field-affixes {
+  /** Change from neutral to color */
+  --dsc-field-affix-border-color: var(--ds-color-border-default);
+  --dsc-field-affix-background: var(--ds-color-surface-tinted);
+  --dsc-field-affix-color: var(--ds-color-text-subtle);
+}
+
+.ds-fieldset {
+  /** Change from neutral to color */
+  --dsc-fieldset-description-color: var(--ds-color-text-subtle);
+}
+
+.ds-input {
+  /** Change from neutral to color */
+  --dsc-input-background: var(--ds-color-surface-default);
+  --dsc-input-border-color: var(--ds-color-border-default);
+  --dsc-input-outline-color--hover: var(--ds-color-border-default);
+  --dsc-input-color: var(--ds-color-text-default);
+}
+
+.ds-skeleton {
+  /** Change from neutral to color */
+  --dsc-skeleton-background: var(--ds-color-surface-tinted);
+}
+
+.ds-suggestion {
+  /** Change from neutral to color */
+  --dsc-suggestion-list-background: var(--ds-color-surface-default);
+  --dsc-suggestion-border-color: var(--ds-color-border-subtle);
+  & u-datalist {
+    [data-multiple] & > u-option:not([data-empty]) {
+      --dsc-suggestion-option-checkmark-border-color: var(--ds-color-border-default);
+    }
+  }
+}
+
+.ds-tabs {
+  /** Change from neutral to color */
+  --dsc-tabs-tab-color: var(--ds-color-text-subtle);
+  --dsc-tabs-tab-color--hover: var(--ds-color-text-default);
+  --dsc-tabs-list-border-color: var(--ds-color-border-subtle);
+}
+
+.ds-tooltip {
+  /** Change from neutral to color */
+  --dsc-tooltip-background: var(--ds-color-text-default);
+  --dsc-tooltip-color: var(--ds-color-background-default);
+}