From 4db683033f2498b2bd0be6702869e694c237bd7d Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Wed, 8 Jan 2025 15:46:22 +0100 Subject: [PATCH] fix: linting issues --- .config/.jscpd.json | 1 + .../scss/colors/_default-palette.scss | 27 ++++++++++ .../patternhub/styles/decision-tree.scss | 5 +- showcases/patternhub/styles/globals.scss | 53 ++++++++++++------- showcases/patternhub/styles/highlight.scss | 13 +++++ 5 files changed, 77 insertions(+), 22 deletions(-) diff --git a/.config/.jscpd.json b/.config/.jscpd.json index 3de99f064d3..1cb94524838 100644 --- a/.config/.jscpd.json +++ b/.config/.jscpd.json @@ -41,6 +41,7 @@ "packages/components/src/components/radio/radio.lite.tsx", "packages/components/src/components/tag/tag.spec.tsx", "packages/foundations/assets/icons/functional/fonts/**", + "packages/foundations/assets/icons/fonts/**", "packages/foundations/src", "showcases/**/results/**", "showcases/angular-showcase/.angular/cache", diff --git a/packages/foundations/scss/colors/_default-palette.scss b/packages/foundations/scss/colors/_default-palette.scss index 4cb9f7a8f82..d999ac3eb9c 100644 --- a/packages/foundations/scss/colors/_default-palette.scss +++ b/packages/foundations/scss/colors/_default-palette.scss @@ -172,136 +172,163 @@ initial-value: #070708; inherits: true; } + @property --db-brand-1 { syntax: ""; initial-value: #0d0e10; inherits: true; } + @property --db-brand-2 { syntax: ""; initial-value: #121315; inherits: true; } + @property --db-brand-3 { syntax: ""; initial-value: #1a1c1e; inherits: true; } + @property --db-brand-4 { syntax: ""; initial-value: #2e3134; inherits: true; } + @property --db-brand-5 { syntax: ""; initial-value: #44474c; inherits: true; } + @property --db-brand-6 { syntax: ""; initial-value: #5a5f65; inherits: true; } + @property --db-brand-7 { syntax: ""; initial-value: #72777f; inherits: true; } + @property --db-brand-8 { syntax: ""; initial-value: #8b919a; inherits: true; } + @property --db-brand-9 { syntax: ""; initial-value: #a6acb4; inherits: true; } + @property --db-brand-10 { syntax: ""; initial-value: #c3c7cc; inherits: true; } + @property --db-brand-11 { syntax: ""; initial-value: #e1e3e5; inherits: true; } + @property --db-brand-12 { syntax: ""; initial-value: #edeef0; inherits: true; } + @property --db-brand-13 { syntax: ""; initial-value: #f3f4f5; inherits: true; } + @property --db-brand-14 { syntax: ""; initial-value: #f9f9fa; inherits: true; } + @property --db-brand-origin { syntax: ""; initial-value: #242629; inherits: true; } + @property --db-brand-origin-light-default { syntax: ""; initial-value: #242629; inherits: true; } + @property --db-brand-origin-light-hovered { syntax: ""; initial-value: #393c40; inherits: true; } + @property --db-brand-origin-light-pressed { syntax: ""; initial-value: #4f5358; inherits: true; } + @property --db-brand-on-origin-light-default { syntax: ""; initial-value: #f9f9fa; inherits: true; } + @property --db-brand-on-origin-light-hovered { syntax: ""; initial-value: #dcdce2; inherits: true; } + @property --db-brand-on-origin-light-pressed { syntax: ""; initial-value: #c0c0cb; inherits: true; } + @property --db-brand-origin-dark-default { syntax: ""; initial-value: #242629; inherits: true; } + @property --db-brand-origin-dark-hovered { syntax: ""; initial-value: #393c40; inherits: true; } + @property --db-brand-origin-dark-pressed { syntax: ""; initial-value: #4f5358; inherits: true; } + @property --db-brand-on-origin-dark-default { syntax: ""; initial-value: #f9f9fa; inherits: true; } + @property --db-brand-on-origin-dark-hovered { syntax: ""; initial-value: #dcdce2; inherits: true; } + @property --db-brand-on-origin-dark-pressed { syntax: ""; initial-value: #c0c0cb; diff --git a/showcases/patternhub/styles/decision-tree.scss b/showcases/patternhub/styles/decision-tree.scss index 620d8c81928..ba7a1567305 100644 --- a/showcases/patternhub/styles/decision-tree.scss +++ b/showcases/patternhub/styles/decision-tree.scss @@ -35,11 +35,10 @@ } > .column-1-3 { - grid-column-start: 1; - grid-column-end: 3; + grid-column: 1 / 3; } > a > div { - height: 100%; + block-size: 100%; } } diff --git a/showcases/patternhub/styles/globals.scss b/showcases/patternhub/styles/globals.scss index f6be6923ee6..e282082d971 100644 --- a/showcases/patternhub/styles/globals.scss +++ b/showcases/patternhub/styles/globals.scss @@ -20,10 +20,11 @@ body:not(:has(.db-page)) { } #__next { - height: inherit; + block-size: inherit; } + #__next > div { - height: inherit; + block-size: inherit; } db-mainnavigation { @@ -35,14 +36,14 @@ github-version-switcher { } iframe { - width: 100%; - height: calc(100% - 8px) !important; + inline-size: 100%; + block-size: calc(100% - 8px) !important; } .example-list { dd { margin-block-end: variables.$db-spacing-fixed-md; - max-width: 500px; + max-inline-size: 500px; } } @@ -81,7 +82,7 @@ iframe { } .is-properties { - height: 100%; + block-size: 100%; overflow: auto; h1, @@ -93,7 +94,8 @@ iframe { /* TODO: Use real table css in future */ table { @extend %db-density-functional; - width: 100%; + + inline-size: 100%; border-collapse: collapse; } @@ -101,7 +103,7 @@ table td, table th { border: 1px solid colors.$db-adaptive-on-bg-basic-emphasis-60-default; padding: variables.$db-spacing-fixed-md; - max-width: 33vw; + max-inline-size: 33vw; } table tr:nth-child(even) { @@ -110,11 +112,12 @@ table tr:nth-child(even) { table th { @extend %db-neutral-bg-basic-transparent-semi; + padding-inline: variables.$db-spacing-fixed-md; } .version-switcher { - max-width: variables.$db-sizing-3xl; + max-inline-size: variables.$db-sizing-3xl; } /* Workaround for current db-page from db-ui-elements */ @@ -122,6 +125,7 @@ div[class^="ch-"] { div, span { @extend %db-overwrite-font-size-sm; + color: colors.$db-adaptive-on-bg-basic-emphasis-100-default; } } @@ -137,6 +141,7 @@ div[class^="ch-"] { %grid-container { --columns: 1; + display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: variables.$db-spacing-fixed-md; @@ -154,6 +159,7 @@ div[class^="ch-"] { .icons-overview-container { @extend %grid-container; + --columns: 2; @include screen-sizes.screen() { @@ -175,6 +181,7 @@ div[class^="ch-"] { // colors overview .color-overview-container { @extend %grid-container; + position: relative; padding: variables.$db-spacing-fixed-md 0; @@ -261,7 +268,7 @@ div[class^="ch-"] { background-color: colors.$db-successful-bg-inverted-contrast-high-default; color: colors.$db-successful-on-bg-inverted-default; border-color: colors.$db-successful-bg-inverted-contrast-high-default; - height: 100%; + block-size: 100%; display: flex; justify-content: center; position: absolute; @@ -278,6 +285,7 @@ div[class^="ch-"] { .example-spacing-fixed, .example-spacing-responsive { border: 1px solid black; + > div { display: flex; border: 1px solid @@ -294,7 +302,8 @@ div[class^="ch-"] { .gap1, .gap2 { @extend %spacing; - width: variables.$db-spacing-fixed-xl; + + inline-size: variables.$db-spacing-fixed-xl; } $icon-width: calc( @@ -302,11 +311,11 @@ div[class^="ch-"] { ); .gap1 { - left: $icon-width; + inset-inline-start: $icon-width; } .gap2 { - right: $icon-width; + inset-inline-end: $icon-width; } } @@ -318,15 +327,20 @@ div[class^="ch-"] { .margin1, .margin2 { @extend %spacing; - width: variables.$db-spacing-responsive-sm; + + inline-size: variables.$db-spacing-responsive-sm; } .margin1 { - left: calc(-1 * #{variables.$db-spacing-responsive-sm}); + inset-inline-start: calc( + -1 * #{variables.$db-spacing-responsive-sm} + ); } .margin2 { - right: calc(-1 * #{variables.$db-spacing-responsive-sm}); + inset-inline-end: calc( + -1 * #{variables.$db-spacing-responsive-sm} + ); } } @@ -338,6 +352,7 @@ div[class^="ch-"] { .sizing { @extend %spacing; + background-color: colors.$db-warning-bg-inverted-contrast-high-default; color: colors.$db-warning-on-bg-inverted-default; border-color: colors.$db-warning-bg-inverted-contrast-high-default; @@ -395,7 +410,8 @@ h6 { font-size: 0; } - &:hover { + &:hover, + &:focus { a:is(.header-link) { visibility: visible; } @@ -475,8 +491,7 @@ h6 { inset-block-end: variables.$db-spacing-fixed-sm; @include screen-sizes.screen("md") { - inset-block-end: auto; - inset-block-start: variables.$db-spacing-fixed-sm; + inset-block: variables.$db-spacing-fixed-sm auto; } } } diff --git a/showcases/patternhub/styles/highlight.scss b/showcases/patternhub/styles/highlight.scss index be1ef281b71..22cff97ccf9 100644 --- a/showcases/patternhub/styles/highlight.scss +++ b/showcases/patternhub/styles/highlight.scss @@ -27,6 +27,7 @@ pre:has(.hljs):not(:has(.language-shell)) { /* prettylights-syntax-entity */ color: colors.$db-successful-on-bg-basic-emphasis-90-default; } + .hljs-attribute, .hljs-literal, .hljs-number, @@ -38,20 +39,24 @@ pre:has(.hljs):not(:has(.language-shell)) { /* prettylights-syntax-constant */ color: colors.$db-successful-on-bg-basic-emphasis-90-default; } + .hljs-regexp, .hljs-string, .hljs-meta .hljs-string { /* prettylights-syntax-string */ color: colors.$db-successful-on-bg-basic-emphasis-90-default; } + .hljs-built_in, .hljs-symbol { /* prettylights-syntax-variable */ color: colors.$db-warning-on-bg-basic-emphasis-90-default; } + .hljs-attr { color: colors.$db-informational-on-bg-basic-emphasis-90-default; } + .hljs-meta, .hljs-comment, .hljs-code, @@ -71,39 +76,47 @@ pre:has(.hljs):not(:has(.language-shell)) { /* prettylights-syntax-entity-tag */ color: colors.$db-successful-on-bg-basic-emphasis-90-default; } + .hljs-subst { /* prettylights-syntax-storage-modifier-import */ color: colors.$db-warning-on-bg-basic-emphasis-90-default; } + .hljs-section { /* prettylights-syntax-markup-heading */ color: colors.$db-informational-on-bg-basic-emphasis-90-default; font-weight: bold; } + .hljs-bullet { /* prettylights-syntax-markup-list */ color: colors.$db-warning-on-bg-basic-emphasis-90-default; } + .hljs-emphasis { /* prettylights-syntax-markup-italic */ color: colors.$db-adaptive-on-bg-basic-emphasis-100-default; font-style: italic; } + .hljs-strong { /* prettylights-syntax-markup-bold */ color: colors.$db-adaptive-on-bg-basic-emphasis-100-default; font-weight: bold; } + .hljs-addition { /* prettylights-syntax-markup-inserted */ color: colors.$db-successful-on-bg-basic-emphasis-90-default; background-color: colors.$db-neutral-on-bg-basic-emphasis-90-default; } + .hljs-deletion { /* prettylights-syntax-markup-deleted */ color: colors.$db-critical-on-bg-basic-emphasis-90-default; background-color: colors.$db-neutral-on-bg-basic-emphasis-90-default; } + .hljs-char.escape_, .hljs-link, .hljs-params,