From 9aa694ae29418f733194262529f94a45f62c4a77 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Mon, 27 Nov 2023 16:39:58 +0100 Subject: [PATCH 1/3] :fire: [open-formulieren/open-forms#36] Delete obsolete link styles The SDK CSS covers all our link styling needs, so this can be deleted entirely now. --- .../ui/static/ui/scss/components/_index.scss | 1 - .../a11y-toolbar/_a11y-toolbar.scss | 1 - .../ui/scss/components/anchor/_anchor.scss | 69 ------------------- .../ui/scss/components/anchor/_index.scss | 1 - 4 files changed, 72 deletions(-) delete mode 100644 src/openforms/ui/static/ui/scss/components/anchor/_anchor.scss delete mode 100644 src/openforms/ui/static/ui/scss/components/anchor/_index.scss diff --git a/src/openforms/ui/static/ui/scss/components/_index.scss b/src/openforms/ui/static/ui/scss/components/_index.scss index c0ddad91e3..f3abfc5251 100644 --- a/src/openforms/ui/static/ui/scss/components/_index.scss +++ b/src/openforms/ui/static/ui/scss/components/_index.scss @@ -6,7 +6,6 @@ // Custom @import 'a11y-toolbar'; -@import 'anchor'; @import 'card'; @import 'fa-icon'; @import 'list'; diff --git a/src/openforms/ui/static/ui/scss/components/a11y-toolbar/_a11y-toolbar.scss b/src/openforms/ui/static/ui/scss/components/a11y-toolbar/_a11y-toolbar.scss index 24cb3edde2..6f1f06d1ce 100644 --- a/src/openforms/ui/static/ui/scss/components/a11y-toolbar/_a11y-toolbar.scss +++ b/src/openforms/ui/static/ui/scss/components/a11y-toolbar/_a11y-toolbar.scss @@ -1,5 +1,4 @@ @use 'microscope-sass/lib/bem'; -@use '../anchor/anchor'; @import '~microscope-sass/lib/grid'; @import '~microscope-sass/lib/responsive'; diff --git a/src/openforms/ui/static/ui/scss/components/anchor/_anchor.scss b/src/openforms/ui/static/ui/scss/components/anchor/_anchor.scss deleted file mode 100644 index 35062de409..0000000000 --- a/src/openforms/ui/static/ui/scss/components/anchor/_anchor.scss +++ /dev/null @@ -1,69 +0,0 @@ -/** - * The OpenForms Anchor component wraps around and extends the .utrecht-link component. - * - * Our own .openforms-anchor is being phased out in favour of - * .utrecht-link--openforms- extensions. - * - * TODO: there are probably some gains in implementing/overriding :visited, :hover and/or - * :active states for some variants. - */ -@use 'microscope-sass/lib/bem'; - -@import '@utrecht/components/dist/link-button/css/index.css'; -@import '@utrecht/components/dist/link/css/index'; // emits the .utrecht-link {...} styles - -/** - * Extensions of the utrecht-link component with OF-specific styles. - * - * Taken from open-forms-sdk styles and stripped down to what is actually used. - */ -.utrecht-link { - @include bem.modifier('openforms') { - font-family: var( - --of-utrecht-link-font-family, - var(--of-typography-sans-serif-font-family, var(--utrecht-document-font-family)) - ); - margin: 0; - cursor: pointer; - - // workaround for CSS issue in upstream component - &:visited { - &:hover { - color: var(--utrecht-link-hover-color); - } - } - } - - // swap the hover/no-hover text decoration rules compared to the non-modified variant - @include bem.modifier('openforms-hover') { - text-decoration: var(--utrecht-link-hover-text-decoration); - - &:hover { - text-decoration: var(--utrecht-link-text-decoration); - } - } - - @include bem.modifier('openforms-active') { - font-weight: bold; - } - - @include bem.modifier('openforms-inherit') { - color: inherit; - - &:visited:hover, - &:hover { - color: inherit; - } - } -} - -/** - * Apply the standard link styles (without modifiers) to the anchor tags. - - * For WYSIWYG-like content where classnames cannot be controlled. - */ -@mixin extend-utrecht-link() { - a { - @extend .utrecht-link, .utrecht-link--openforms; - } -} diff --git a/src/openforms/ui/static/ui/scss/components/anchor/_index.scss b/src/openforms/ui/static/ui/scss/components/anchor/_index.scss deleted file mode 100644 index 8c567fdb39..0000000000 --- a/src/openforms/ui/static/ui/scss/components/anchor/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'anchor'; \ No newline at end of file From bec41d5fb4c34595fd517c23272c228693135550 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Wed, 29 Nov 2023 11:15:31 +0100 Subject: [PATCH 2/3] :arrow_up: [open-formulieren/open-forms-sdk#36] Upgrade design tokens to 0.51.0 --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 14bb47842d..23dfe8f29c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "UNLICENSED", "dependencies": { "@fortawesome/fontawesome-free": "^6.1.1", - "@open-formulieren/design-tokens": "^0.48.0", + "@open-formulieren/design-tokens": "^0.51.0", "@open-formulieren/formio-builder": "^0.9.0", "@rjsf/core": "^4.2.1", "@tinymce/tinymce-react": "^3.12.6", @@ -4236,9 +4236,9 @@ "dev": true }, "node_modules/@open-formulieren/design-tokens": { - "version": "0.48.0", - "resolved": "https://registry.npmjs.org/@open-formulieren/design-tokens/-/design-tokens-0.48.0.tgz", - "integrity": "sha512-kNBgEKfTiRcqp/w3qCSl2WJJ2SO7eRbmzI8K+M8zuDhEGezBNaX+3kKEK0Y1I8tf25BLqLYF2HIwUOqO+HNZ0w==" + "version": "0.51.0", + "resolved": "https://registry.npmjs.org/@open-formulieren/design-tokens/-/design-tokens-0.51.0.tgz", + "integrity": "sha512-SpAYCkqIOe2DMGxPg2vweRJOnUjDwD+h7nQEKZz2+1kgW2XwcFIDwerBRBqgaYtDvzxrYmSaTIB0SnoZYg4YDw==" }, "node_modules/@open-formulieren/formio-builder": { "version": "0.9.0", @@ -28795,9 +28795,9 @@ "dev": true }, "@open-formulieren/design-tokens": { - "version": "0.48.0", - "resolved": "https://registry.npmjs.org/@open-formulieren/design-tokens/-/design-tokens-0.48.0.tgz", - "integrity": "sha512-kNBgEKfTiRcqp/w3qCSl2WJJ2SO7eRbmzI8K+M8zuDhEGezBNaX+3kKEK0Y1I8tf25BLqLYF2HIwUOqO+HNZ0w==" + "version": "0.51.0", + "resolved": "https://registry.npmjs.org/@open-formulieren/design-tokens/-/design-tokens-0.51.0.tgz", + "integrity": "sha512-SpAYCkqIOe2DMGxPg2vweRJOnUjDwD+h7nQEKZz2+1kgW2XwcFIDwerBRBqgaYtDvzxrYmSaTIB0SnoZYg4YDw==" }, "@open-formulieren/formio-builder": { "version": "0.9.0", diff --git a/package.json b/package.json index bc4908265d..f2e3e27581 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "homepage": "https://maykinmedia.nl", "dependencies": { "@fortawesome/fontawesome-free": "^6.1.1", - "@open-formulieren/design-tokens": "^0.48.0", + "@open-formulieren/design-tokens": "^0.51.0", "@open-formulieren/formio-builder": "^0.9.0", "@rjsf/core": "^4.2.1", "@tinymce/tinymce-react": "^3.12.6", From 7e0ab13d9de6bfbbcd3a7767f1ed0140c66e5810 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Wed, 29 Nov 2023 12:10:29 +0100 Subject: [PATCH 3/3] :arrow_up: [open-formulieren/open-forms#36] Fix crash in token editor because of 'inherit' CSS color value --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 23dfe8f29c..b412c3bbb8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "bem.js": "^1.0.10", "classnames": "^2.3.1", "copy-to-clipboard": "^3.3.1", - "design-token-editor": "^0.5.0", + "design-token-editor": "^0.5.1", "flatpickr": "^4.6.9", "formik": "^2.2.9", "formiojs": "~4.13.0", @@ -14874,9 +14874,9 @@ } }, "node_modules/design-token-editor": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/design-token-editor/-/design-token-editor-0.5.0.tgz", - "integrity": "sha512-DDg4dGfxI9mDtqgYMlIXn74CANrG7y7ojpAIfSO5i0dMaSp46epusheyB7mP4TsDMrnzPvrxxtQgGs9VFEMieA==", + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/design-token-editor/-/design-token-editor-0.5.1.tgz", + "integrity": "sha512-zc/8h3KW0Cxtlro4QViDRYtsCdI3HOVT5cZ7xFDpUaSiSLLDW5kg3Bo/uER1ZA4Bm3zjO5VPLELCYETGQjcjtw==", "dependencies": { "clsx": "^1.2.1", "color": "^4.2.3", @@ -36510,9 +36510,9 @@ "dev": true }, "design-token-editor": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/design-token-editor/-/design-token-editor-0.5.0.tgz", - "integrity": "sha512-DDg4dGfxI9mDtqgYMlIXn74CANrG7y7ojpAIfSO5i0dMaSp46epusheyB7mP4TsDMrnzPvrxxtQgGs9VFEMieA==", + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/design-token-editor/-/design-token-editor-0.5.1.tgz", + "integrity": "sha512-zc/8h3KW0Cxtlro4QViDRYtsCdI3HOVT5cZ7xFDpUaSiSLLDW5kg3Bo/uER1ZA4Bm3zjO5VPLELCYETGQjcjtw==", "requires": { "clsx": "^1.2.1", "color": "^4.2.3", diff --git a/package.json b/package.json index f2e3e27581..9a325baccc 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "bem.js": "^1.0.10", "classnames": "^2.3.1", "copy-to-clipboard": "^3.3.1", - "design-token-editor": "^0.5.0", + "design-token-editor": "^0.5.1", "flatpickr": "^4.6.9", "formik": "^2.2.9", "formiojs": "~4.13.0",