From 204c77dab814b694b403e559b7ec6d4817489243 Mon Sep 17 00:00:00 2001 From: Kieran Nichols Date: Thu, 1 Feb 2024 10:48:50 -0500 Subject: [PATCH] [@next][inline-message] refactor to use tokens (#462) --- package-lock.json | 50 +++++------ package.json | 2 +- .../pages/inline-message/inline-message.ejs | 46 ++-------- .../pages/inline-message/inline-message.html | 20 ++++- .../pages/inline-message/inline-message.ts | 23 +++-- src/dev/pages/theme/theme.ts | 35 ++++++-- .../styles/tokens/inline-message/_tokens.scss | 26 ++++++ .../styles/tokens/theme/_token-utils.scss | 23 ++++- src/lib/inline-message/_core.scss | 40 +++++++++ src/lib/inline-message/_mixins.scss | 77 ----------------- src/lib/inline-message/_token-utils.scss | 25 ++++++ src/lib/inline-message/_variables.scss | 62 -------------- src/lib/inline-message/index.scss | 1 + .../inline-message-constants.ts | 16 +++- src/lib/inline-message/inline-message.html | 2 +- src/lib/inline-message/inline-message.scss | 84 +++++++++++++++++-- src/lib/inline-message/inline-message.test.ts | 51 +++++++++++ src/lib/inline-message/inline-message.ts | 46 ++++++++-- src/lib/state-layer/state-layer-foundation.ts | 4 + src/lib/theme/_theme-dark.scss | 10 +-- .../inline-message.fixture.html | 9 -- .../inline-message/inline-message.spec.ts | 65 -------------- 22 files changed, 396 insertions(+), 321 deletions(-) create mode 100644 src/lib/core/styles/tokens/inline-message/_tokens.scss create mode 100644 src/lib/inline-message/_core.scss delete mode 100644 src/lib/inline-message/_mixins.scss create mode 100644 src/lib/inline-message/_token-utils.scss delete mode 100644 src/lib/inline-message/_variables.scss create mode 100644 src/lib/inline-message/index.scss create mode 100644 src/lib/inline-message/inline-message.test.ts delete mode 100644 src/test/spec/inline-message/inline-message.fixture.html delete mode 100644 src/test/spec/inline-message/inline-message.spec.ts diff --git a/package-lock.json b/package-lock.json index c65ba7aa7..20ffa6a42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { - "@floating-ui/dom": "^1.5.3", + "@floating-ui/dom": "~1.5.3", "@material/animation": "^14.0.0", "@material/button": "^14.0.0", "@material/card": "^14.0.0", @@ -1694,26 +1694,26 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz", - "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", + "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==", "dependencies": { - "@floating-ui/utils": "^0.1.3" + "@floating-ui/utils": "^0.2.1" } }, "node_modules/@floating-ui/dom": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", - "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz", + "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==", "dependencies": { - "@floating-ui/core": "^1.4.2", - "@floating-ui/utils": "^0.1.3" + "@floating-ui/core": "^1.5.3", + "@floating-ui/utils": "^0.2.0" } }, "node_modules/@floating-ui/utils": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", - "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" }, "node_modules/@gar/promisify": { "version": "1.1.3", @@ -22354,26 +22354,26 @@ } }, "@floating-ui/core": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz", - "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", + "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==", "requires": { - "@floating-ui/utils": "^0.1.3" + "@floating-ui/utils": "^0.2.1" } }, "@floating-ui/dom": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", - "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz", + "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==", "requires": { - "@floating-ui/core": "^1.4.2", - "@floating-ui/utils": "^0.1.3" + "@floating-ui/core": "^1.5.3", + "@floating-ui/utils": "^0.2.0" } }, "@floating-ui/utils": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", - "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" }, "@gar/promisify": { "version": "1.1.3", diff --git a/package.json b/package.json index 867ccf8f6..e0f0e389e 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "update-deps": "npm-check-updates --peer -u && npm install && npm run lint" }, "dependencies": { - "@floating-ui/dom": "^1.5.3", + "@floating-ui/dom": "~1.5.3", "@material/animation": "^14.0.0", "@material/button": "^14.0.0", "@material/card": "^14.0.0", diff --git a/src/dev/pages/inline-message/inline-message.ejs b/src/dev/pages/inline-message/inline-message.ejs index 1543a05c0..2aec20801 100644 --- a/src/dev/pages/inline-message/inline-message.ejs +++ b/src/dev/pages/inline-message/inline-message.ejs @@ -1,54 +1,22 @@
- -
Info-primary theme (default)
-
Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit.
+ +
Default (info theme)
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore harum illo quam aperiam hic quis perspiciatis ea laborum quia suscipit corporis cumque, accusantium, atque odit odio excepturi amet? Commodi, perferendis.
No icon
-
Irure quis enim labore qui deserunt ea fugiat.
- - - - -
No title. Mollit id in est sit in mollit.
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore harum illo quam aperiam hic quis perspiciatis ea laborum quia suscipit corporis cumque, accusantium, atque odit odio excepturi amet? Commodi, perferendis.
 -
No title. No icon. Mollit id in est sit in mollit.
- - - -
Info-secondary theme
-
- Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit. - Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit. -
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore harum illo quam aperiam hic quis perspiciatis ea laborum quia suscipit corporis cumque, accusantium, atque odit odio excepturi amet? Commodi, perferendis.
 - -
Danger theme
- -
Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit.
- - - - -
Warning theme
-
Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit.
- - - - -
Success theme
-
- Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit. - Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit. - Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit. - Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit. -
+ +
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore harum illo quam aperiam hic quis perspiciatis ea laborum quia suscipit corporis cumque, accusantium, atque odit odio excepturi amet? Commodi, perferendis.
diff --git a/src/dev/pages/inline-message/inline-message.html b/src/dev/pages/inline-message/inline-message.html index 90605bebf..4130840e2 100644 --- a/src/dev/pages/inline-message/inline-message.html +++ b/src/dev/pages/inline-message/inline-message.html @@ -2,7 +2,25 @@ include('./src/partials/page.ejs', { page: { title: 'Inline message', - includePath: './pages/inline-message/inline-message.ejs' + includePath: './pages/inline-message/inline-message.ejs', + options: [ + { + type: 'select', + label: 'Theme', + id: 'opt-theme', + defaultValue: 'info', + options: [ + { label: 'Primary', value: 'primary' }, + { label: 'Secondary', value: 'secondary' }, + { label: 'Tertiary', value: 'tertiary' }, + { label: 'Success', value: 'success' }, + { label: 'Error', value: 'error' }, + { label: 'Warning', value: 'warning' }, + { label: 'Info (default)', value: 'info' }, + { label: 'Info secondary', value: 'info-secondary' } + ] + } + ] } }) %> diff --git a/src/dev/pages/inline-message/inline-message.ts b/src/dev/pages/inline-message/inline-message.ts index 3d334aabd..9d6bcacf2 100644 --- a/src/dev/pages/inline-message/inline-message.ts +++ b/src/dev/pages/inline-message/inline-message.ts @@ -1,13 +1,18 @@ import '$src/shared'; -import '@tylertech/forge/inline-message'; import '@tylertech/forge/icon'; import { IconRegistry } from '@tylertech/forge/icon'; -import { tylIconCancel, tylIconCheck, tylIconInfo, tylIconNotifications, tylIconWarning } from '@tylertech/tyler-icons/standard'; +import '@tylertech/forge/inline-message'; +import { INLINE_MESSAGE_CONSTANTS } from '@tylertech/forge/inline-message'; +import type { ISelectComponent } from '@tylertech/forge/select'; +import { tylIconInfo } from '@tylertech/tyler-icons/standard'; + +IconRegistry.define(tylIconInfo); + +const themeSelect = document.getElementById('opt-theme') as ISelectComponent; +themeSelect.addEventListener('change', ({ detail }: CustomEvent) => { + getAllInlineMessages().forEach(el => el.setAttribute('theme', detail)); +}); -IconRegistry.define([ - tylIconNotifications, - tylIconInfo, - tylIconWarning, - tylIconCheck, - tylIconCancel -]); +function getAllInlineMessages(): NodeListOf { + return document.querySelectorAll(INLINE_MESSAGE_CONSTANTS.elementName); +} diff --git a/src/dev/pages/theme/theme.ts b/src/dev/pages/theme/theme.ts index 01f6b56eb..fed2778ea 100644 --- a/src/dev/pages/theme/theme.ts +++ b/src/dev/pages/theme/theme.ts @@ -43,44 +43,65 @@ const SWATCH_GROUPS: ISwatchGroup[] = [ header: 'Key colors', swatches: [ { text: 'Primary', background: 'primary', foreground: 'on-primary' }, - { text: 'Primary container', background: 'primary-container', foreground: 'on-primary-container' } + { text: 'Primary container (minimum)', background: 'primary-container-minimum', foreground: 'on-primary-container-minimum' }, + { text: 'Primary container (low)', background: 'primary-container-low', foreground: 'on-primary-container-low' }, + { text: 'Primary container', background: 'primary-container', foreground: 'on-primary-container' }, + { text: 'Primary container (high)', background: 'primary-container-high', foreground: 'on-primary-container-high' } ] }, { swatches: [ { text: 'Secondary', background: 'secondary', foreground: 'on-secondary' }, - { text: 'Secondary container', background: 'secondary-container', foreground: 'on-secondary-container' } + { text: 'Secondary container (minimum)', background: 'secondary-container-minimum', foreground: 'on-secondary-container-minimum' }, + { text: 'Secondary container (low)', background: 'secondary-container-low', foreground: 'on-secondary-container-low'}, + { text: 'Secondary container', background: 'secondary-container', foreground: 'on-secondary-container' }, + { text: 'Secondary container (high)', background: 'secondary-container-high', foreground: 'on-secondary-container-high' } ] }, { swatches: [ { text: 'Tertiary', background: 'tertiary', foreground: 'on-tertiary' }, - { text: 'Tertiary container', background: 'tertiary-container', foreground: 'on-tertiary-container' } + { text: 'Tertiary container (minimum)', background: 'tertiary-container-minimum', foreground: 'on-tertiary-container-minimum' }, + { text: 'Tertiary container (low)', background: 'tertiary-container-low', foreground: 'on-tertiary-container-low' }, + { text: 'Tertiary container', background: 'tertiary-container', foreground: 'on-tertiary-container' }, + { text: 'Tertiary container (high)', background: 'tertiary-container-high', foreground: 'on-tertiary-container-high' } ] }, { header: 'Status', swatches: [ { text: 'Success', background: 'success', foreground: 'on-success' }, - { text: 'Success container', background: 'success-container', foreground: 'on-success-container' } + { text: 'Success container (minimum)', background: 'success-container-minimum', foreground: 'on-success-container-minimum' }, + { text: 'Success container (low)', background: 'success-container-low', foreground: 'on-success-container-low' }, + { text: 'Success container', background: 'success-container', foreground: 'on-success-container' }, + { text: 'Success container (high)', background: 'success-container-high', foreground: 'on-success-container-high' } ] }, { swatches: [ { text: 'Error ', background: 'error', foreground: 'on-error' }, - { text: 'Error container', background: 'error-container', foreground: 'on-error-container' } + { text: 'Error container (minimum)', background: 'error-container-minimum', foreground: 'on-error-container-minimum' }, + { text: 'Error container (low)', background: 'error-container-low', foreground: 'on-error-container-low' }, + { text: 'Error container', background: 'error-container', foreground: 'on-error-container' }, + { text: 'Error container (high)', background: 'error-container-high', foreground: 'on-error-container-high' } ] }, { swatches: [ { text: 'Warning', background: 'warning', foreground: 'on-warning' }, - { text: 'Warning container', background: 'warning-container', foreground: 'on-warning-container' } + { text: 'Warning container (minimum)', background: 'warning-container-minimum', foreground: 'on-warning-container-minimum' }, + { text: 'Warning container (low)', background: 'warning-container-low', foreground: 'on-warning-container-low' }, + { text: 'Warning container', background: 'warning-container', foreground: 'on-warning-container' }, + { text: 'Warning container (high)', background: 'warning-container-high', foreground: 'on-warning-container-high' } ] }, { swatches: [ { text: 'Info', background: 'info', foreground: 'on-info' }, - { text: 'Info container', background: 'info-container', foreground: 'on-info-container' } + { text: 'Info container (minimum)', background: 'info-container-minimum', foreground: 'on-info-container-minimum' }, + { text: 'Info container (low)', background: 'info-container-low', foreground: 'on-info-container-low' }, + { text: 'Info container', background: 'info-container', foreground: 'on-info-container' }, + { text: 'Info container (high)', background: 'info-container-high', foreground: 'on-info-container-high' } ] }, { diff --git a/src/lib/core/styles/tokens/inline-message/_tokens.scss b/src/lib/core/styles/tokens/inline-message/_tokens.scss new file mode 100644 index 000000000..7b9f73ee7 --- /dev/null +++ b/src/lib/core/styles/tokens/inline-message/_tokens.scss @@ -0,0 +1,26 @@ +@use 'sass:map'; +@use '../../theme'; +@use '../../shape'; +@use '../../spacing'; +@use '../../border'; +@use '../../utils'; + +$tokens: ( + background: utils.module-val(inline-message, background, theme.variable(info-container-low)), + color: utils.module-val(inline-message, color, theme.variable(text-high)), + shape: utils.module-val(inline-message, shape, shape.variable(medium)), + padding: utils.module-val(inline-message, padding, spacing.variable(small)), + padding-inline: utils.module-ref(inline-message, padding-inline, padding), + padding-block: utils.module-ref(inline-message, padding-block, padding), + border-width: utils.module-val(inline-message, border-width, border.variable(thin)), + border-style: utils.module-val(inline-message, border-style, none), + border-color: utils.module-val(inline-message, border-color, theme.variable(info-container)), + gap: utils.module-val(inline-message, gap, spacing.variable(small)), + icon-gap: utils.module-ref(inline-message, icon-gap, gap), + content-gap: utils.module-ref(inline-message, content-gap, gap), + icon-color: utils.module-val(inline-message, icon-color, theme.variable(on-info-container-low)) +) !default; + +@function get($key) { + @return map.get($tokens, $key); +} diff --git a/src/lib/core/styles/tokens/theme/_token-utils.scss b/src/lib/core/styles/tokens/theme/_token-utils.scss index 3b8696f79..f1e4b58f5 100644 --- a/src/lib/core/styles/tokens/theme/_token-utils.scss +++ b/src/lib/core/styles/tokens/theme/_token-utils.scss @@ -18,7 +18,10 @@ $surface-tone: color-utils.tone($surface); // The container colors are the provided color mixed with the surface color at lower emphasis levels + $container-high: theme-utils.hexify($color, $surface, color-emphasis.value(medium-low)); $container: theme-utils.hexify($color, $surface, color-emphasis.value(low)); + $container-low: theme-utils.hexify($color, $surface, color-emphasis.value(lower)); + $container-minimum: theme-utils.hexify($color, $surface, color-emphasis.value(minimum)); // The on-color is the contrast color against the provided color $on-color: theme-utils.contrast($color); @@ -26,7 +29,10 @@ // The on-container colors are the contrast color for the provided color mixed with the // container color at a lower emphasis to let the contrast color bleed through for // increased contrast against the lower emphasis container color + $on-container-high: theme-utils.contrast($container-high); $on-container: theme-utils.hexify($color, theme-utils.contrast($container), color-emphasis.value(medium)); + $on-container-low: theme-utils.hexify($color, theme-utils.contrast($container-low), color-emphasis.value(medium)); + $on-container-minimum: theme-utils.hexify($color, theme-utils.contrast($container-minimum), color-emphasis.value(medium)); // Compute contrast ratio for foreground colors against their corresponding background $minimum-ratio: 4.5; @@ -36,11 +42,26 @@ @if color-utils.contrast-ratio($container, $on-container) < $minimum-ratio { @warn 'The contrast ratio between "#{$name}-container" and "on-#{$name}-container" is less than 4.5:1.'; } + @if color-utils.contrast-ratio($container-high, $on-container-high) < $minimum-ratio { + @warn 'The contrast ratio between "#{$name}-container-high" and "on-#{$name}-container-high" is less than 4.5:1.'; + } + @if color-utils.contrast-ratio($container-low, $on-container-low) < $minimum-ratio { + @warn 'The contrast ratio between "#{$name}-container-low" and "on-#{$name}-container-low" is less than 4.5:1.'; + } + @if color-utils.contrast-ratio($container-minimum, $on-container-minimum) < $minimum-ratio { + @warn 'The contrast ratio between "#{$name}-container-minimum" and "on-#{$name}-container-minimum" is less than 4.5:1.'; + } @return ( #{$name}: $color, + #{$name}-container-minimum: $container-minimum, + #{$name}-container-low: $container-low, #{$name}-container: $container, + #{$name}-container-high: $container-high, on-#{$name}: $on-color, - on-#{$name}-container: $on-container + on-#{$name}-container-minimum: $on-container-minimum, + on-#{$name}-container-low: $on-container-low, + on-#{$name}-container: $on-container, + on-#{$name}-container-high: $on-container-high ); } diff --git a/src/lib/inline-message/_core.scss b/src/lib/inline-message/_core.scss new file mode 100644 index 000000000..52ba13ccb --- /dev/null +++ b/src/lib/inline-message/_core.scss @@ -0,0 +1,40 @@ +@use './token-utils' as *; +@use '../core/styles/typography'; + +@forward './token-utils'; + +@mixin host { + display: flex; +} + +@mixin base { + @include typography.style(body1); + + background: #{token(background)}; + color: #{token(color)}; + + border-radius: #{token(shape)}; + border-width: #{token(border-width)}; + border-style: #{token(border-style)}; + border-color: #{token(border-color)}; + + display: flex; + gap: #{token(icon-gap)}; + box-sizing: border-box; + padding-inline: #{token(padding-inline)}; + padding-block: #{token(padding-block)}; +} + +@mixin container { + display: flex; + flex-direction: column; + gap: #{token(content-gap)}; +} + +@mixin title { + @include typography.style(heading1); +} + +@mixin icon { + color: #{token(icon-color)}; +} diff --git a/src/lib/inline-message/_mixins.scss b/src/lib/inline-message/_mixins.scss deleted file mode 100644 index d19d055b6..000000000 --- a/src/lib/inline-message/_mixins.scss +++ /dev/null @@ -1,77 +0,0 @@ -@use 'sass:map'; -@use '@material/typography/typography' as mdc-typography; -@use './variables'; -@use '../theme'; - -@mixin provide-theme($theme) { - @include theme.theme-properties(inline-message, $theme, variables.$theme-values); -} - -@mixin theme-property($property, $theme, $overriding-css-custom-property) { - $light-theme-value: map.get(variables.$theme-values, $theme + '-' + $property); - $dark-theme-css-custom-property: --forge-inline-message-theme-#{$theme}-#{$property}; - - // map the properties for 'color' back to 'color'. The differentiation between icon and font is required for the theme handling above. - $styleName: $property; - @if $styleName == 'font-color' or $styleName == 'icon-color' { - $styleName: color; - } - - $primary-override: $overriding-css-custom-property; - $secondary-override: $dark-theme-css-custom-property; - $default: $light-theme-value; - - #{$styleName}: $default; - #{$styleName}: var($primary-override, var($secondary-override, $default)); -} - -@mixin theme-base($theme) { - .forge-inline-message { - @include theme-property('background', $theme, --forge-inline-message-theme-background); - @include theme-property('font-color', $theme, --forge-inline-message-theme-on-background); - - ::slotted([slot='icon']) { - @include theme-property('icon-color', $theme, --forge-inline-message-theme-icon); - } - } -} - -@mixin default-theme { - :host { - @include theme-base('info-primary'); - } -} - -@mixin theme($theme) { - :host([theme='#{$theme}']) { - @include theme-base($theme); - } -} - -@mixin core-styles() { - .forge-inline-message { - @include mdc-typography.typography(body2); - @include theme.css-custom-property(border-radius, --forge-inline-message-border-radius, 0); - - display: flex; - flex-direction: row; - padding: variables.$padding; - - ::slotted([slot='icon']) { - align-self: start; - margin-right: 12px; - } - - &__container { - align-self: center; - - ::slotted([slot='title']) { - @include mdc-typography.typography(body2); - - font-weight: 500; - line-height: 1rem; - margin-bottom: 8px; - } - } - } -} diff --git a/src/lib/inline-message/_token-utils.scss b/src/lib/inline-message/_token-utils.scss new file mode 100644 index 000000000..9184887b8 --- /dev/null +++ b/src/lib/inline-message/_token-utils.scss @@ -0,0 +1,25 @@ +@use '../core/styles/tokens/inline-message/tokens'; +@use '../core/styles/tokens/token-utils'; + +$_module: inline-message; +$_tokens: tokens.$tokens; + +@mixin provide-theme($theme) { + @include token-utils.provide-theme($_module, $_tokens, $theme); +} + +@function token($name, $type: token) { + @return token-utils.token($_module, $_tokens, $name, $type); +} + +@function declare($token) { + @return token-utils.declare($_module, $token); +} + +@mixin override($token, $token-or-value, $type: token) { + @include token-utils.override($_module, $_tokens, $token, $token-or-value, $type); +} + +@mixin tokens($includes: null, $excludes: null) { + @include token-utils.tokens($_module, $_tokens, $includes, $excludes); +} diff --git a/src/lib/inline-message/_variables.scss b/src/lib/inline-message/_variables.scss deleted file mode 100644 index 95cc0fd65..000000000 --- a/src/lib/inline-message/_variables.scss +++ /dev/null @@ -1,62 +0,0 @@ -@use '../theme/theme-values'; - -$default-color: theme-values.$text-primary-color !default; -$padding-top: 8px !default; -$padding-right: 16px !default; -$padding-bottom: 8px !default; -$padding-left: 12px !default; -$padding: $padding-top $padding-right $padding-bottom $padding-left !default; - -$theme-values: ( - // success theme - success-background: rgba(165, 214, 167, 0.3), - success-font-color: theme-values.$text-primary-color, - success-icon-color: #1b5e20, - - // warning theme - warning-background: rgba(255, 219, 166, 0.3), - warning-font-color: theme-values.$text-primary-color, - warning-icon-color: #a03a03, - - // danger theme - danger-background: rgba(255, 205, 210, 0.3), - danger-font-color: theme-values.$text-primary-color, - danger-icon-color: #a22d0e, - - // info-primary theme - info-primary-background: rgba(187, 222, 251, 0.3), - info-primary-font-color: theme-values.$text-primary-color, - info-primary-icon-color: #1a237e, - - // info-secondary theme - info-secondary-background: rgba(224, 224, 224, 0.4), - info-secondary-font-color: theme-values.$text-primary-color, - info-secondary-icon-color: #000000 -) !default; - -$theme-values-dark: ( - // success theme - success-background: #175a2a, - success-font-color: #ffffff, - success-icon-color: #ffffff, - - // warning theme - warning-background: #933600, - warning-font-color: #ffffff, - warning-icon-color: #ffffff, - - // danger theme - danger-background: #810022, - danger-font-color: #ffffff, - danger-icon-color: #ffffff, - - // info-primary theme - info-primary-background: #0a3b71, - info-primary-font-color: #ffffff, - info-primary-icon-color: #ffffff, - - // info-secondary theme - info-secondary-background: #424242, - info-secondary-font-color: #ffffff, - info-secondary-icon-color: #ffffff -); diff --git a/src/lib/inline-message/index.scss b/src/lib/inline-message/index.scss new file mode 100644 index 000000000..98a38c0d9 --- /dev/null +++ b/src/lib/inline-message/index.scss @@ -0,0 +1 @@ +@forward './core'; diff --git a/src/lib/inline-message/inline-message-constants.ts b/src/lib/inline-message/inline-message-constants.ts index d6cecc05d..e361082ae 100644 --- a/src/lib/inline-message/inline-message-constants.ts +++ b/src/lib/inline-message/inline-message-constants.ts @@ -1,12 +1,20 @@ -import { COMPONENT_NAME_PREFIX } from '../constants'; +import { COMPONENT_NAME_PREFIX, Theme } from '../constants'; const elementName: keyof HTMLElementTagNameMap = `${COMPONENT_NAME_PREFIX}inline-message`; -const selectors = { - ROOT: '.forge-inline-message' +const attributes = { + THEME: 'theme' +}; + +const defaults = { + THEME: 'info' }; export const INLINE_MESSAGE_CONSTANTS = { elementName, - selectors + attributes, + defaults }; + +type LegacyInlineMessageThemes = 'info-secondary' | 'danger'; +export type InlineMessageTheme = Theme | LegacyInlineMessageThemes; diff --git a/src/lib/inline-message/inline-message.html b/src/lib/inline-message/inline-message.html index cd0cb8915..e12a13e68 100644 --- a/src/lib/inline-message/inline-message.html +++ b/src/lib/inline-message/inline-message.html @@ -1,7 +1,7 @@