diff --git a/.changeset/fresh-parks-sneeze.md b/.changeset/fresh-parks-sneeze.md new file mode 100644 index 0000000000..e721c6e844 --- /dev/null +++ b/.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. diff --git a/.changeset/neat-rockets-build.md b/.changeset/neat-rockets-build.md new file mode 100644 index 0000000000..bc2c136424 --- /dev/null +++ b/.changeset/neat-rockets-build.md @@ -0,0 +1,5 @@ +--- +"@digdir/designsystemet-css": patch +--- + +**Suggestion**: Added `--dsc-suggestion-option-checkmark-border-color`. diff --git a/.changeset/nice-queens-enter.md b/.changeset/nice-queens-enter.md new file mode 100644 index 0000000000..0ba0afb900 --- /dev/null +++ b/.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`. diff --git a/.changeset/petite-falcons-stick.md b/.changeset/petite-falcons-stick.md new file mode 100644 index 0000000000..ad280ed1f5 --- /dev/null +++ b/.changeset/petite-falcons-stick.md @@ -0,0 +1,5 @@ +--- +"@digdir/designsystemet-css": patch +--- + +**Fieldset**: Added `--dsc-fieldset-description-color`. diff --git a/apps/storybook/.storybook/manager.ts b/apps/storybook/.storybook/manager.ts index 01736f4038..2e38e3db12 100644 --- a/apps/storybook/.storybook/manager.ts +++ b/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({ diff --git a/apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.tsx index 5ec018a790..d50315240f 100644 --- a/apps/storybook/.storybook/preview.tsx +++ b/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'; diff --git a/packages/css/package.json b/packages/css/package.json index b8e9fc11fd..54e0cf873e 100644 --- a/packages/css/package.json +++ b/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": { diff --git a/packages/css/src/dropdown.css b/packages/css/src/dropdown.css index 5f8d828f9b..0b14992483 100644 --- a/packages/css/src/dropdown.css +++ b/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); diff --git a/packages/css/src/field.css b/packages/css/src/field.css index f0fe12a1d5..4b13d87d7d 100644 --- a/packages/css/src/field.css +++ b/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; diff --git a/packages/css/src/fieldset.css b/packages/css/src/fieldset.css index 75db7ad593..8551288dfd 100644 --- a/packages/css/src/fieldset.css +++ b/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); } diff --git a/packages/css/src/suggestion.css b/packages/css/src/suggestion.css index 8f9574dd69..ea321b8aec 100644 --- a/packages/css/src/suggestion.css +++ b/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; diff --git a/packages/css/src/v2/README.md b/packages/css/src/v2/README.md new file mode 100644 index 0000000000..e6fdb4a1ee --- /dev/null +++ b/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. \ No newline at end of file diff --git a/packages/css/src/v2/index.css b/packages/css/src/v2/index.css new file mode 100644 index 0000000000..d88bced7af --- /dev/null +++ b/packages/css/src/v2/index.css @@ -0,0 +1,2 @@ +@import url('../index.css'); +@import url('./overrides.css'); diff --git a/packages/css/src/v2/overrides.css b/packages/css/src/v2/overrides.css new file mode 100644 index 0000000000..fe89bf9375 --- /dev/null +++ b/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); +}